<script>
    function htmlEntities(str)
    {
        return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
    function showCities(city)
    {
        var request=new XMLHttpRequest();
        request.onload=function(){
            var data=JSON.parse(this.response);

            var hint="";
            if(city==="")
            {
                for(var i=0; i<data.length; i++)
                {
                    hint+="<div class=\"cityOption\" data-city=\""+htmlEntities(data[i].שם_ישוב)+"\">"+data[i].שם_ישוב+"</div>";
                }
            }
            else
            {
                var strlen=city.length;
                for(var i=0; i<data.length; i++)
                {
                    if(city.localeCompare((data[i].שם_ישוב).substr(0, strlen))==0)
                    {
                        hint+="<div class=\"cityOption\" data-city=\""+htmlEntities(data[i].שם_ישוב)+"\"><strong>"+(data[i].שם_ישוב).substr(0, strlen)+"</strong>"+(data[i].שם_ישוב).substr(strlen)+"</div>";
                    }
                }
            }
            if(hint==="")
            {
                hint+="אין הצעות";
            }
            $("#citiesSuggestions").html(hint);
            $(".cityOption").mousedown(function(){
                var selectedCity=$(this).data("city");
                $("#City").val(selectedCity);
                $("#Street").prop("disabled", false);
                showStreets(selectedCity);
            });
        }
        request.open("GET", "yeshuvim.json", true);
        request.send();
    }
    function showStreets(city, street)
    {
        var request=new XMLHttpRequest();
        request.onload=function(){
            var data=JSON.parse(this.response);

            var hint="";
            if(street==undefined)
            {
                for(var i=0; i<data.length; i++)
                {
                    if((data[i].שם_ישוב).localeCompare(city)==0)
                    {
                        hint+="<div class=\"streetOption\" data-street=\""+htmlEntities(data[i].שם_רחוב)+"\">"+htmlEntities(data[i].שם_רחוב)+"</div>";
                    }
                }
            }
            else
            {
                var strlen=street.length;
                for(var i=0; i<data.length; i++)
                {
                    if((data[i].שם_ישוב).localeCompare(city)==0)
                    {
                        if(street.localeCompare((data[i].שם_רחוב).substr(0, strlen))==0)
                        {
                            hint+="<div class=\"streetOption\" data-street=\""+htmlEntities(data[i].שם_רחוב)+"\"><strong>"+(data[i].שם_רחוב).substr(0, strlen)+"</strong>"+(data[i].שם_רחוב).substr(strlen)+"</div>";
                        }
                    }
                }
            }
            $("#Street").focus();
            $("#streetsSuggestions").html(hint);
            $("#streetsSuggestions").show();
            $(".streetOption").mousedown(function(){
                $("#Street").val($(this).data("street"));
            });
            $("#Street").on({
                blur: function(){
                    $("#streetsSuggestions").hide();
                },
                focus: function(){
                    showStreets(city, $(this).val());
                },
                keyup: function(){
                    showStreets(city, $(this).val());
                }
            });
        }
        request.open("GET", "rechovot.json", true);
        request.send();
    }

    $(document).ready(function(){
        $("#City").on({
            focus: function(){
                showCities($(this).val());
                $("#citiesSuggestions").show();
            },
            keyup: function(){
                showCities($(this).val());
            },
            blur: function(){
                $("#citiesSuggestions").hide();
            }
        });
    });
</script>
<div id="newclient">
    <form action="" method="post">
        <fieldset>
            <div id="row">
                <label for="City">עיר:</label>
                <input type="text" name="City" id="City" placeholder="הכנס עיר" class="value" autocomplete="off" />
                <div id="citiesSuggestions"></div>
            </div>

            <div id="row">
                <label for="Street">רחוב:</label>
                <input type="text" name="Street" id="Street" placeholder="הכנס רחוב" class="value" autocomplete="off" disabled="disabled" />
                <div id="streetsSuggestions"></div>
            </div>
        </fieldset>
    </form>
</div>