jQuery UI 自动完成 JSON 响应问题

Question

我已经做了很多研究，但我仍然不知道如何使用 jQuery ui 自动完成功能。自动完成功能不起作用，我不知道为什么。任何帮助将不胜感激！

我在前端有以下内容。 1. jQuery正确链接。 2. jQuery-ui 正确链接。 3. jQuery-ui css 正确链接。

<script>
$("#tags").autocomplete({
source: function(request, response){
$.post("/panel/tags.php", {data:request.term}, function(data){     
    response($.maps(data, function(item) {
    return {
        label: item.tagName,
        value: item.tagID
    }
    }))
}, "json");
},
minLength: 2,
dataType: "json",
cache: false,
focus: function(event, ui) {
return false;
},
select: function(event, ui) {
this.value = ui.item.label;
/* Do something with user_id */
return false;
}

});
</script>


<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" size="50" />
</div>

在后端：

$query_tags = "SELECT tagID, tagName FROM DCB_Tags WHERE tagName LIKE '".$_GET['tags']."%' ORDER BY tagName ASC LIMIT 10";
$result_tags = mysql_query($query_tags)  or die ("Error: " . mysql_error());

$response = array();
$tags = array();
while($row=mysql_fetch_array($result_tags)) 
{ 
$tagID=$row['tagID']; 
$tagName=$row['tagName']; 
$tags[] = array('tagID'=> $tagID, 'tagName'=> $tagName);

} 

header("content-type: text/javascript");
echo json_encode($tags);
exit();

输出为：

[{"tagID":"1","tagName":"艺术"},{"tagID":"4","tagName":"艺术 显示"},{"tagID":"3","tagName":"艺术家"},{"tagID":"2","tagName":"设计"}]

如果您通过输入 ?tag= 访问该页面艺术它正确地消除了“设计”。

Answer 1

看起来您正在执行 post 然后尝试在 php 页面上获取 $_GET['tags'] 。因此，尝试使用 ajax 函数并在 php 页面上选择 $_GET['term'] 。另外，$.maps 不是一个函数。我认为你的意思是$.map。

而且，如果您希望将 label 作为输入的值，则不要指定 value 字段。如果您只指定一个，自动完成功能将为两者使用label。

jQuery 自动完成：

$("#tags").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "/panel/tags.php",
            dataType: "json",
            data: {term: request.term},
            success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.tagName
                       };
                }));
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
      /* Do something with user_id  */
    }
});

PHP：

$query_tags = "SELECT tagID, tagName FROM DCB_Tags WHERE tagName LIKE '".mysql_real_escape_string($_GET['term'])."%' ORDER BY tagName ASC LIMIT 10";

链接到教程：

Answer 2

我输入“警报（数据长度）；”在success函数开始时，检查从服务器接收到的数据是否正确。它使得 jquery 控件在接收数据时无法显示任何内容。