使用JSON请求的jQuery自动完成问题

我在使用我的自动完成功能时遇到了一些麻烦。我已成功导入jQuery UI.js，并且我的/form/ajaxcall文件正在返回有效的JSON数据，但问题出在筛选下拉结果时。使用JSON请求的jQuery自动完成问题

方法调用：

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

我ajaxcall文件：

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

所以，我的下拉由具有：

巴西，美国，葡萄牙。

问题是：当我在输入框中输入美国（或任何东西）时，下拉菜单显示所有结果。如果我只输入美国，它应该只显示美国，如果我把asdf它不应该显示任何东西，对吧？如果我把一些手动数据放在上面，那就行了。也许是我的代码缺少的东西？

我注意到这是一个常见的问题，通过我看到很多关于它的问题，但我不能继续给出的答案，我不熟悉AJAX/JSON的工作。以下是其中之一。

jquery autocomplete json

在此先感谢和抱歉任何错误。

来源

2014-08-27 Victor Alencar Santos

在远程场景中，实际的过滤必须发生在服务器端。如果您的服务器始终返回相同的值，那么无论您在自动填充中输入什么内容，都会看到相同的确切值。我创建的代码简单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请求，但是你可以用你的代码进行更新。

来源

2014-08-27 16:16:40

你好@Ilya！非常感谢答复。我做了以下步骤，但它仍然不起作用，请让我知道如果我做错了什么： 1 - 我使用第一个功能，只把我的领域在.autocomplete功能，并切换ajax URL。现在下拉列表不会弹出。 2 - 我尝试了第二个函数（$ .get ...），但是当我运行时，控制台抛出一个错误：Uncaught TypeError：对象不是jquery-ui在第6行的函数 3 - 关于服务器端过滤。如果这是问题，您能否给我一些关于ASP.NET MVC 4的信息？谢谢！ – 2014-08-27 18:10:49

@VictorAlencarSantos第二个选项：你是否包含正确顺序的脚本（第一个是jQuery，第二个是jquery-ui）？尝试使用[更新的函数]（http://jsfiddle.net/q6ugxo7t/2/）（但使用您的实际'data'而不是我的虚拟）。 – 2014-08-27 19:07:38

嘿@Ilya！现在它的工作......不知道到底是什么错误，但你的功能做到了诀窍......谢谢！ – 2014-08-28 13:11:48

使用JSON请求的jQuery自动完成问题

回答

相关问题