Question

我有一个奇怪的问题。我从一个php文件中获得了一些JSON格式的信息。我已经使用console.log对其进行了测试，并且数据确实以JSON格式返回，以作为自动填充表单中的潜在选项传递。但是，从输入中下来的列表只包含没有数据的行。以下是我对自动完成功能的一段代码：

$(function() {   
        $( "#searchArea" ).autocomplete({
              delay: 0,
              minLength: 2,           
              source: function(request, response) {
              $.ajax({
              url: 'search.php', 
              data: { term: request.term }, 
              success: function(data) {  
                                response($.map(data, function(item) {
                                return {
                                label: item.firstName,
                                value: item.userID};
                                }));
              }
            });
          }
        })
    });

我不明白。显然我在响应调用中遗漏了一些内容，但无法弄清楚是什么。从php返回的数据包含来自SELECT查询的结果，如下所示：

{ “1”：{ “用户ID”： “1”， “名字”： “迈克”}， “2”：{ “用户ID”： “2”， “名字”： “迈克尔”}}

任何帮助 - 指导将受到赞赏，因为我从早上起就在这附近。谢谢。

Answer 1

如果包含格式为

的数据的响应，它的工作正常

{"1":{"userID":"1","firstName":"Mike"},"2":{"userID":"2","firstName":"Michael"}}

测试代码

<html lang="en">
   <head>
      <meta charset="utf-8">
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            var data = {"1":{"userID":"1","firstName":"Mike"},"2":{"userID":"2","firstName":"Michael"}}
            $( "#automp" ).autocomplete({
               source: function(request, response) {
                   response( $.map( data, function(item) {
                    // your operation on data
                    return {
                               label: item.firstName,
                               value: item.userID
                           }
                    }));
               }
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         <p>Type mike</p>
         <label for="automp">Users: </label>
         <input id="automp">
      </div>
   </body>
</html>

所以你必须在ajax成功回调中检查来自服务器的响应。然后如果响应正确，你必须检查响应是否为json格式化。如果这不是json格式，你可以试试这个

JSON.parse(data);

Answer 2

尝试将limit：100加上源代码提前输入，我不知道原因，但是将其设置为100可以解决此问题。

$('#ahead').typeahead({
            hint: true,highlight: true,
            },
 {
            limit:100,
            source: bloodhound,
....
}

在键入时，从自动完成列表中清空行而不是建议的名称

2 个答案: