jquery UI自动完成下拉列表未显示

Question

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

成功下的alert(data)显示：[object Object]

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;
        }

Firebug 输出 [{"value":"28225"}]

任何帮助将不胜感激
谢谢
克里斯

Answer 1

您需要将数组添加到source 选项。我相信如果您更改 map 函数中的 return 语句，您应该设置为 go。所以，改变

return 
{
    value: item.term
}

到

return item.source

Answer 2

$.map 用于将一个数组转换为另一个数组。在自动完成小部件的上下文中，它用于将源数组转换为自动完成小部件所期望格式的数组。

在您的情况下，它 看起来 就像您的 php 正在返回一个数组，其中的对象结构如下：

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

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

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

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

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

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