jquery UI自动完成下拉列表不显示出来

问题描述：

我正在使用jQuery UI自动完成，由于某种原因，我无法弄清楚为什么没有显示下拉列表。我尝试了所有我能想到的事情，但没有运气......我希望有人能帮助我。 Firebug从我的PHP脚本中显示正确的JSON输出。jquery UI自动完成下拉列表不显示出来

下成功的警报（数据）表示：[对象的对象]

HTML代码

<select name=key1 id=key1> 
    <option selected value="">CHOOSE ONE </option> 
    <option value="allrecs">ALL RECORDS <</option> 
    <option value="citnumb">CIT NUMBER <<option> 
    <option value="sernumb">SERIAL NUMBER </option> 
    <option value="model">MODEL </option> 
</select> 

<input type="text" size=30 name="qvalue" id="qvalue">

JQUERY脚本

$("#qvalue").autocomplete( 
{ 
    source: function(request, response) 
    { 
    $.ajax(
    { 
     url: "jqsuggest2.php", 
     type: "POST", 
     dataType: "json", 
     data:{term: request.term,searchkey:$('#key1').val() 
    }, 
    success: function(data) 
    { 
     alert(data); 
     response($.map(data, function(item) 
     { 
     return 
     { 
      value: item.term 
     } 
     })); 
       } 
     }); 
    }, 
    minLength: 2 

});

PHP脚本

 $json = '['; 
     $first = true; 

     while($row = mysql_fetch_array($result)) 
     { 
      if (!$first) 
      { 
       $json .= ','; 
      } 
      else 
      { 
       $first = false; 
      } 

      if ($searchkey == "citnumb") 
      { 
       $json .= '{"value":"'.$row['citnum'].'"}'; 
      } 
      if ($searchkey == "sernumb") 
      { 
       $json .= '{"value":"'.$row['sernum'].'"}'; 
      } 
      elseif ($searchkey == "model") 
      { 
       $json .= '{"value":"'.$row['model'].'"}'; 
      } 

     } 
     $json .= ']'; 
     echo $json; 
     }

萤火虫输出 [{ “值”： “28225”}]

任何帮助，将不胜感激
由于
克里斯

答

您需要有一个数组来source选项。我相信如果你改变你的地图函数中的return语句，你应该设置为去。所以，用于将一个阵列变换成另一种阵列改变

return 
{ 
    value: item.term 
}

到

return item.source

Willam：我得到了以下错误...“缺少;之前的声明 http://tobagoborn.com/javascript/jquery-ui/js/jquery-1.5.1.min.js 行16”.. ..其中提示使用护目镜的jQuery的CDN ....我加回了{}的和改变item.term item.value，现在它的作品！感谢您的协助！ – ChrisJ

哦，是啊......应该是'item.source' ...很高兴你在最后想到它。 –

答

$.map。在自动填充小部件的上下文中，它用于将源数组转换为自动填充小部件所需格式的数组。

在你的情况下，看起来像你的PHP与结构类似这样的对象返回一个数组：

[{ "value": "1234"}, ... ]

原来，这是自动完成使用一个有效的数组。你不应该需要任何后期处理。换句话说，这应该为你工作：

$("#qvalue").autocomplete( 
{ 
    source: "jqsuggest2.php", 
    minLength: 2 
});

事实上，你可能会缩短你的PHP只返回一个字符串数组：

["1234", "4567", "89101"]

这也是自动完成使用一个有效的数组。

我很好奇从服务器发送到自动填充小部件的字符串的格式。 jQuery自动完成文档说：“使用字符串时，自动完成插件期望该字符串指向将返回JSON数据的URL资源。它可以在同一个主机上或不同的主机上（必须提供JSONP）。“所以我使用了JSON，你清楚的知道这个代码，对于远程服务器提供Autocomplete，JSON是不是必须的？这是一个变化，文档是不正确？什么是交易？ –

是的，远程服务器必须返回JSON格式的数据供插件使用。提供一个字符串只是让小部件知道使用AJAX通过提供的URL检索JSON数据 –

谢谢，安德鲁。我不明白这提供了一个字符串来获得JSON的ajax检索。但您的评论确认我应该在PHP中生成JSON并使用数据：JSON;在Autocomplete中获取它。 –

jquery UI自动完成下拉列表不显示出来

相关推荐