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

Question

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

成功下的警报（数据）显示： [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 选项中。我相信如果您更改地图函数中的 return 语句，您应该可以开始。所以，

return 
{
    value: item.term
}

改为

return item.source

Answer 2

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

在你的例子中，它看起来就像你的php返回一个数组，其中的对象结构如下：

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

事实证明这是一个可供自动完成使用的有效数组。您不应该需要任何后期处理。换句话说，这应该对您有用：

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

事实上，您可以缩短 PHP 以仅返回一个字符串数组：

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

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