Javascript jquery自动完成不过滤并显示json文件中的所有结果

我有一个文本框，可以根据名称从JSON文件中搜索城市，但它不起作用。例如，当我搜索Antalia时，我的自动完成结果只会返回JSON文件中列出的所有城市：

这是我的JSON文件：

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

下面是我的jquery自动完成代码：

<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>

---

因为您正在加载整个JSON文件并返回它，而不需要查询进行任何过滤

$(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);
});

---

您还应该移动$a.nextloading.show；如我的示例所示，因为在返回缓存响应时，您不需要加载动画，而且还可以无限期地保留该动画。

您能提供JSFIDLE吗？是的，我会提供。@Anami但是当我将json文件更改为数组类型时，它将不再工作。您的意思是我必须删除$a.nextloading.show；从上面的代码中，并将其放在我的代码的顶部？@inaz是的，但这并不重要。首先，仔细检查我是如何修改$.getJSON回调的。我用术语过滤那里的数据，并缓存/返回过滤后的数据。