php,Jquery自动完成多个值,远程!
我是jquery的新手!我在应用程序中使用jQueryUIAutoComplete,其中自动完成值来自数据库。下面是我正在使用的代码,但什么都没有发生php,Jquery自动完成多个值,远程!,php,jquery-ui,Php,Jquery Ui,我是jquery的新手!我在应用程序中使用jQueryUIAutoComplete,其中自动完成值来自数据库。下面是我正在使用的代码,但什么都没有发生 search.php <?php $conn = mysql_connect("localhost", "root", ""); mysql_select_db("webforum", $conn); $q = strtolower($_GET["term"]); $query = mysql_que
search.php
<?php
$conn = mysql_connect("localhost", "root", "");
mysql_select_db("webforum", $conn);
$q = strtolower($_GET["term"]);
$query = mysql_query("select name from groups where name like %$q%");
while ($row = mysql_fetch_array($query)) {
echo json_encode($row);
}
?>
下面是test.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> jQuery UI Autocomplete - Multiple, remote </title>
<link rel="stylesheet" href="theme/jquery.ui.all.css">
<script type="text/javascript" src="jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.autocomplete.js"></script>
<style type="text/css">
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script type="text/javascript">
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#birds" )
// 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( "http://localhost/webforum/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;
}
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" size="50" />
</div>
</div>
</body>
</html>
有人能帮我吗?
先走一步 取自jQuery自动完成文档 本地数据可以是一个简单的字符串数组,也可以包含数组中每个项的对象,可以是标签属性或值属性,也可以两者兼有。标签特性将显示在“建议”菜单中。在用户从菜单中选择某个内容后,该值将插入到输入元素中。如果只指定了一个属性,则它将同时用于两个属性,例如,如果只提供值属性,则该值也将用作标签 使用字符串时,Autocomplete插件希望该字符串指向将返回JSON数据的URL资源。它可以在同一台主机上,也可以在不同的主机上。必须提供JSONP。请求参数术语被添加到该URL中。数据本身可以采用与上述本地数据相同的格式 假设上述情况;将代码调整为以下值:
<?php
$conn = mysql_connect("localhost", "root", "");
mysql_select_db("webforum", $conn);
$q = strtolower($_GET["term"]);
$query = mysql_query("select name from groups where name like %$q%");
$results = array();
while ($row = mysql_fetch_array($query)) {
array_push($results, $row);
}
echo json_encode($results);
?>
您的json看起来怎么样? 为了使用jquery ui autocomplete,您需要至少具有标签和值属性:
{
'label' : 'your_label',
'value' : 'your_value'
}
在js代码中,您要求的是value属性,而php生成的json上似乎没有设置该属性
这里有一个类似的问题:
因此,php必须以正确的方式构建结果:
$conn = mysql_connect("localhost", "root", "");
mysql_select_db("webforum", $conn);
$q = strtolower($_GET["term"]);
$return = array();
$query = mysql_query("select name from groups where name like %$q%");
while ($row = mysql_fetch_array($query))
{
//since we have just 1 value from the db just use it as both value and label
array_push($return,array('label'=>$row['name'],'value'=>$row['name']));
}
echo(json_encode($return));
另外,使用$\u GET[]参数进行查询并不安全。thanx对于您的帮助,它工作得很好。是否有一种方法可以在建议和文本字段中显示名称,并能够捕获该组的id?您必须在查询中选择它,并将其作为value属性传递给json对象。如果答案有效,你应该接受它。