Question

我有一个文本框可以根据名称从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>

Answer 1

因为您正在加载整个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).next("#loading").show();，如我的示例所示，因为您在返回缓存的响应时不需要加载动画，并且您也会无限期地保留该动画。

jquery autocomplete不过滤并显示json文件的所有结果

1 个答案: