我想將「Jquery UI Autocomplete with multiple values」應用於一個註冊表單輸入字段。請幫我解決自動完成問題
我想要做什麼:當訪客輸入現有用戶的名字到這個輸入字段時,首先,腳本搜索名字存在,完成它(如果存在),添加逗號。用戶可以輸入第二,第三...現有的用戶名到這個字段,每次腳本都會自動完成。當訪問者點擊提交按鈕時,PHP搜索這個用戶名的id,創建id的數組,將它添加到db表中的新用戶「friends」字段。
我的代碼:
HTML
<form action="index.php" method="post">
<input class="std" type="text" name="friends" id="friends"/>
<input type="submit" name="submit">
</form>
jQuery的
$(function() {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term ).pop();
}
$("#friends")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
source: function(request, response) {
$.getJSON("search.php", {
term: extractLast(request.term)
}, response);
},
search: function() {
// custom minLength
var term = extractLast(this.value);
if (term.length < 2) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
該位置是完美的作品樣本文件夾原來的PHP文件。但我想從數據庫,而不是陣列
原始的search.php
$q = strtolower($_GET["term"]);
if (!$q) return;
$items = array(
"Great Bittern"=>"Botaurus stellaris",
"Little Grebe"=>"Tachybaptus ruficollis",
"Black-necked Grebe"=>"Podiceps nigricollis",
"Little Bittern"=>"Ixobrychus minutus",
"Black-crowned Night Heron"=>"Nycticorax nycticorax",
"Purple Heron"=>"Ardea purpurea",
"White Stork"=>"Ciconia ciconia",
"Spoonbill"=>"Platalea leucorodia",
"Red-crested Pochard"=>"Netta rufina",
"Common Eider"=>"Somateria mollissima",
"Red Kite"=>"Milvus milvus",
);
function array_to_json($array){
if(!is_array($array)){
return false;
}
$associative = count(array_diff(array_keys($array), array_keys(array_keys($array))));
if($associative){
$construct = array();
foreach($array as $key => $value){
// We first copy each key/value pair into a staging array,
// formatting each key and value properly as we go.
// Format the key:
if(is_numeric($key)){
$key = "key_$key";
}
$key = "\"".addslashes($key)."\"";
// Format the value:
if(is_array($value)){
$value = array_to_json($value);
} else if(!is_numeric($value) || is_string($value)){
$value = "\"".addslashes($value)."\"";
}
// Add to staging array:
$construct[] = "$key: $value";
}
// Then we collapse the staging array into the JSON form:
$result = "{ " . implode(", ", $construct) . " }";
} else { // If the array is a vector (not associative):
$construct = array();
foreach($array as $value){
// Format the value:
if(is_array($value)){
$value = array_to_json($value);
} else if(!is_numeric($value) || is_string($value)){
$value = "'".addslashes($value)."'";
}
// Add to staging array:
$construct[] = $value;
}
// Then we collapse the staging array into the JSON form:
$result = "[ " . implode(", ", $construct) . " ]";
}
return $result;
}
$result = array();
foreach ($items as $key=>$value) {
if (strpos(strtolower($key), $q) !== false) {
array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($key)));
}
if (count($result) > 11)
break;
}
echo array_to_json($result);
更改的search.php
$conn = mysql_connect("localhost", "user", "pass");
mysql_select_db("db", $conn);
$q = strtolower($_GET["term"]);
$query = mysql_query("select fullname from usr_table where fullname like %$q%");
$results = array();
while ($row = mysql_fetch_array($query)) {
array_push($results, $row);
}
echo json_encode($results);
自動完成功能不適合我的工作來獲取。找不到錯誤的代碼部分。請幫忙解決這個問題。對不起,我的英文不好
thx for reply,我試過但沒有成功。與靜態一個完美的作品。我不知道該怎麼做(( – 2011-06-16 15:51:00
好,我從%$ q%更改爲'$ q%',現在它可以運行http://prntscr.com/22mxl,但不顯示菜單。 prntscr。COM/22mxg。如何解決這個問題?對於原始搜索.PHP它返回somtehing像這樣http://prntscr.com/22n0e並顯示http://prntscr.com/22n0r。請解釋一下這個筆畫的含義是什麼? $ results [] = array($ row [1] => $ row [0]); – 2011-06-16 16:08:45
我已經做了上面的編輯。 – Josh 2011-06-16 16:27:20