JQuery自動完成結果

你好，我正在使用自動完成來允許用戶搜索存儲在MySQL數據庫中的場地。當用戶開始輸入並使用結果處理程序打印選定的場所時，自動完成插件當前列出場地。JQuery自動完成結果

我也想打印地址，電話號碼和網站的地點，但我不知道如何做到這一點。

我有自動完成插件運行php腳本從數據庫打印出場地名稱。我不知道如何檢索數據庫中的其他領域，而不顯示自動完成輸入字段...

這是我到目前爲止有：

JQuery的

$(document).ready(function(){ 
    $("#example").autocomplete("search.php", {width: 260, selectFirst: false}).result(function(event, data, formatted) { 
    $("#result").html(!data ? "No match!" : "Selected: " + formatted); 
    }); 

});

PHP

$search = $_GET['q']; 
    $search = "%".$search."%"; 
    $result = mysql_query("SELECT club_name FROM clubs WHERE club_name LIKE '$search'") or die('Something is wrong'); 
     while($value = mysql_fetch_array($result)){ 
      $club = $value[club_name]; 
      echo "$club\n"; 
     }

只以上的PHP選擇俱樂部的名字，因爲磨片n我嘗試選擇更多的字段，它們顯示在JQuery端的搜索結果中。

我是JQuery的新手，所以我有點迷路...有什麼建議嗎？

來源

2010-01-13 mrdthomas

有幾個方法可以做到這一點，但是這是最簡單的：

你想從這樣的服務器返回的數據。第一欄應包含要檢索到底值：

title|address|phone|web 
title|address|phone|web 
title|address|phone|web

然後你要使用的formatItem and formatValue回調的自動完成功能：

$(document).ready(function(){ 
    $("#example").autocomplete("search.php", { 
     width: 260, 
     selectFirst: false, 
     formatItem: function(row){ 
      var ret = '<span class="title">' + row[0] + '</span><br />'; 
      ret += '<span class="address">' + row[1] + '</span> '; 
      ret += '<span class="phone">' + row[2] + '</span> '; 
      ret += '<span class="web">' + row[3] + '</span> '; 
      return ret; 
     }, 
     formatValue: function(row){ 
      return row[0]; // We only want the first value to be searched 
     } 
     }).result(function(event, data, formatted) { 
     $("#result").html(!data ? "No match!" : "Selected: " + formatted); 
     }); 
});

此外，你不逃避來自用戶的輸入以及因此對於SQL注入具有令人討厭的可調度性

來源

2010-01-13 04:45:14

謝謝我會給這個鏡頭。至於沒有轉義，我仍在測試腳本，所以我會在安全功能發揮作用時添加它。再次感謝！ – mrdthomas 2010-01-13 21:51:09

@mrdthomas太棒了！如果它適合你，一定要回來，並將答案標記爲已接受，以便將來的搜索者知道它是正確的......再加上我們都得到了rep points :)歡迎來到Stack Overflow！ – 2010-01-13 21:53:38

@Doug Neiner，您提供的代碼非常好用，謝謝！ – mrdthomas 2010-01-14 01:03:04

JQuery自動完成結果

回答

相關問題