Question

如何使用获取的json数据使用JQuery UI自动完成？它没有在我的工作。

我使用这个例子http://jqueryui.com/autocomplete/，但不是我从json获取的硬编码数据。

我的json数据来自网址localhost/myproject/output/names。

HTML

<input type="text" class="form-control" name="search" placeholder="Search" id="search">

JS

<script>
  $(function() {
    $( "#search" ).autocomplete({
      source: "localhost/myproject/output/names"
    });
  });
  </script>

json数据

[{"fullname":"John Smith"},{"fullname":"Juan dela Cruz"}]

修改

我已经设法使用@artm评论的json数据修复问题。现在它是[{John Smith},{Juan dela Cruz}]

但另一个问题是，当我输入字母o时，即使只有John Smith包含o，也会建议这两个字母。我该如何解决这个问题？

Answer 1

jQuery UI自动完成需要一个字符串数组，例如

["John Smith", "Juan dela Cruz"]

或具有label和value属性的对象数组，例如：

[ { label: "name", value: "John Smith" }, { label: "name", value: "Juan dela Cruz" }... ]

如果您的数据源没有以这种格式直接发送数据，您可以将一个函数传递给source选项，您可以在该选项中从数据源检索数据并相应地修改它。

该函数接收两个参数：

具有单个term属性的请求对象，其值为用户输入
应以正确格式传递数据的回调函数。

尝试一下

$(function() {
  $( "#search" ).autocomplete({
   source: function(request, response){
     $.ajax("localhost/myproject/output/names",{ // retrieve the data
          //ajax settings
         success: function(data){
            var matches = $.map(data,function(item){ // create an array of strings

               // find the matching items manually in insert to the array
               if(item.fullname.indexOf(request.term)>=0)
                 return item.fullname;
            });
            response(matches); // pass the results to response callback
         }
     });
   }
  });
});

附注：代码未经过测试，仅用于概述。

使用JQuery UI自动完成功能从JSON搜索数据无法正常工作

1 个答案: