6
我想将“具有多个值的JQuery UI自动完成”应用于一个注册表单输入字段。自动完成功能无法正常工作
我想要做什么:当访客输入现有用户的名字到这个输入字段时,首先,脚本搜索名字存在,完成它(如果存在),添加逗号。用户可以输入第二,第三...现有的用户名到这个字段,并且每次脚本都会自动完成。当访问者点击提交按钮时,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", "tural", "0579ural") or die(mysql_error());;
mysql_select_db("askon", $conn) or die(mysql_error());;
$q = strtolower($_GET["term"]);
if (!$q) return;
$query = mysql_query("select id, fullname from usr_table where fullname like '$q%'") or die(mysql_error());;
$results = array();
while ($row = mysql_fetch_array($query)) {
$results[] = array($row[1] => $row[0]);
}
echo json_encode($results);
自动完成PHP脚本prntscr.com/22mxl,但我觉得有些不对劲与jquery :它不显示菜单。 prntscr.com/22mxg。如何解决这个问题? P.S原始SEARCH.PHP它返回像这样prntscr.com/22n0e和显示prntscr.com/22n0r。
我想你需要json_encode($ results [0]);检查萤火虫的回应是否得到任何回应或根本没有。 – 2011-06-16 16:22:08
没有。 search.php工作正常。我应该改变jQuery的一部分。请打开屏幕截图,你会看到原来的文件之间的差异,并改变了你的JavaScript中的一个 – 2011-06-16 16:24:42
do console.log(this.value)在选择函数 – 2011-06-16 16:32:37