Question

我在使用自动完成功能时遇到了一些麻烦。我已经成功导入了jQuery UI.js，我的/form/ajaxcall文件返回了一个有效的JSON数据，但问题是在过滤下拉结果时。

方法调用：

$("[data-maskattribute=autocomplete]").autocomplete({
       source: "/form/ajaxcall",
   });

我的ajaxcall文件：

[{"label":"Brasil","value":1},{"label":"USA","value":2},{"label":"Portugal","value":3}]

所以，我的下拉列表由：

组成

巴西，美国，葡萄牙。

问题是：当我在输入框中键入US（或任何内容）时，下拉列表会显示所有结果。如果我只输入美国，它应该只显示美国，如果我放asdf它不应该显示任何内容，对吧？如果我把一些手动数据放在上面，可以正常工作。我的代码可能缺少一些东西吗？

我注意到这是一个常见的问题，就像我看到很多关于它的问题一样，但我无法继续给出给定的答案，我不熟悉与之合作AJAX / JSON。以下是其中之一。

jquery autocomplete json

提前致谢并对任何错误表示抱歉。

Answer 1

在远程方案中，实际过滤必须在服务器端进行。如果您的服务器始终返回相同的值，那么无论您在自动完成中输入什么内容，您都会看到相同的确切值。我使用jsfiddle的代码创建了一个简单的documentation：

$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://gd.geobytes.com/AutoCompleteCity",
                dataType: "jsonp",
                data: {
                    q: request.term
                },
                success: function( data ) {  
                    console.log(data);
                    response( data );
                }
            });
        },
        minLength: 3,
    });
});

如果您在文本输入中键入“USA”，控制台将显示来自服务器的数据数组。在网络选项卡上，您将看到该请求包含“USA”字符串作为参数。您应该在服务器端使用它来进行过滤。

修改

我认为您可能希望先加载整个国家/地区列表，然后在离线自动完成功能中使用它。如果是这样，那么你应该重写你的代码：

$.get("/form/ajaxcall", function( data ) { $( "#city" ).autocomplete({ source: data }); });

查看更新的demo。我仍然在那里发出ajax请求，但你可以用你的代码更新它。

使用JSON请求的jQuery AutoComplete问题

1 个答案: