jquery autocomplete not filter and showing all results from json file

Question

I have a textbox to search a city from the JSON file according to name but it does not work. For example when i search Antalia my autocomplete results just returns me all the cities listed in my JSON file:

This is my JSON file :

[
    { "label" : "Tehran", "hotelid" : 1203548.0 },
    { "label" : "Antalya", "hotelid" : 1168092.0 }
]

and here is my jquery autocomplete code:

<input autocomplete="off" name="_root.route.start.country" class="autocomplete-hint select" data-auto-complete-minlength="1" type="text" onFocus="searchCountry(this)" placeholder="Departure">

<script type="text/javascript">

    function searchCountry(a) {
        $(function() {
            var cache = {};
            $(a).autocomplete({
                appendTo: ".countrys",
                change: function (event, ui) {
                    if (ui.item == null || ui.item == undefined) {
                        $(a).val("");
                        $(a).empty();
                        $(a).next("#loading").hide();
                    } else {
                        var position = $(".countrys").position(),
                        left = position.left, top = position.top;
                        $(".countrys > ul").css({
                            left: left + 20 + "px",
                            top: top + 4 + "px"
                        });
                    }
                },
                minLength: 1,
                select: function (event, ui) {
                    // Set autocomplete element to display the label
                    this.value = ui.item.label;
                    $(this).closest("tr").find(".countryid").val(ui.item.hotelid);
                    $(this).closest("tr").find(".countryid").next(".countryid").val(ui.item.hotelid);

                    // Store value in hidden field
                    $('#hidden_field').val(ui.item.id);
                    $('#hidden_field1').empty().text(ui.item.label);

                    // Prevent default behaviour
                    return false;
                },
                source: function( request, response ) {
                    $(a).next("#loading").show();
                    var term = request.term;
                    if (term in cache) {
                        response(cache[term]);
                        return;
                    }

                    $.getJSON( "jsonloadi.bc", request, function( data, status, xhr ) {
                        $(a).next("#loading").hide();
                        cache[ term ] = data;
                        response( data );
                    });
                }
            });
        });
    }
</script>

Answer 1

Because you are loading the whole JSON file and returning it without any filtering by your query.

$(a).next("#loading").show(); // move loading animation here

$.getJSON("jsonloadi.bc", request, function(data, status, xhr) {
  // YOU NEED TO FILTER DATA FIRST!
  var filtered = data.filter(function(hotel) {
    return hotel.label.indexOf(term) !== -1;
  });
  cache[term] = filtered;
  $(a).next("#loading").hide();
  response(filtered);
});

You should also move $(a).next("#loading").show(); as shown in my example, because you don't need a loading animation when just returning a cached response and you would also leave that animation there indefinitely.