2011-09-20 77 views
2

我已经做了大量的研究,但我仍然没有得到如何使用jQuery ui自动完成。自动完成不起作用,我不知道为什么。任何帮助将不胜感激!jQuery UI自动完成JSON响应问题

我在前台有以下内容。 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”, “变量名”: “艺术”},{” tagID“:”4“,”tagName“:”art shows“},{”tagID“:”3“,”tagName“:”artist“},{”tagID“:”2“,”tagName“设计“}]

如果你通过放置?tag = art来访问页面,它正确地消除了“设计”。

回答

3

它看起来像你正在做一个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"; 

链接教程:http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields/

+1

太棒了!请注意:我需要一个与标签不同的值(在我的例子中,cust_name和cust_nbr)。在“label:item.tagName”之后添加第二行:“value:tagId”。另外,从服务器返回的JSON包含一个包含实际数据的子数组,我的客户信息在data.cust_data中。在你的$ .map中做:“$ .map(data.cust_data,function(item){”。(我猜我可以用item.cust_data.cust_nbr)只是一个简单的参考。 – gregthegeek

0

我把 “警报(data.length);”在成功功能开始时,检查从服务器收到的数据是否正确。它使得jquery控件在收到数据时无法显示任何内容。