我真的希望避免发布新问题,但我找不到包含调用页面和“搜索”页面的jQuery自动完成远程功能的功能示例。 jQueryUI“演示和文档”部分不包含“search.php”的来源
我尝试过几十种组合,但这就是我的开始:
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
}
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 1,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" />
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</div>
和search.php:
$conn = mysql_connect("localhost", "USERNAME", "PASSWORD");
mysql_select_db("DATABASE", $conn);
$q = strtolower($_GET["birds"]);
$query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'");
while ($row = mysql_fetch_array($query)) {
echo json_encode($row);
}
有没有人有代码片段显示他们可以分享的这个等式的两边?非常感谢您提供的任何帮助。
答案 0 :(得分:18)
以下是search.php的正确代码:
$conn = mysql_connect("localhost", "USERNAME", "PASSWORD");
mysql_select_db("DATABASE", $conn);
$q = strtolower($_GET["term"]);
$return = array();
$query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'");
while ($row = mysql_fetch_array($query)) {
array_push($return,array('label'=>$row['FIELD'],'value'=>$row['FIELD']));
}
echo(json_encode($return));
一些关键点
我希望将来可以帮助一些人!
答案 1 :(得分:3)
当您使用“jQuery UI自动完成教程”进行谷歌搜索时,有几个较大的教程,我想这些可能对您有任何帮助:http://www.google.com/search?q=jqueryUI+autocomplete+tutorial
答案 2 :(得分:1)
以下是我之前使用的自动填充的修剪版本。因为我剪掉了一些代码,所以可能会有一两个错误。
在服务器上:
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];
$html = '';
if(strlen($queryString) >1) {
$names= explode(" ", $queryString );
foreach ($names as &$value) {
// step 1: first names
$result= queryf("SELECT *,
MATCH(productName, productTags, productCategory, productOneLine)
AGAINST ('*$queryString*' IN BOOLEAN MODE)
AS score FROM products
WHERE MATCH(productName, productTags, productCategory, productOneLine)
AGAINST ('*$queryString*' IN BOOLEAN MODE)
AND productStatus='1'
ORDER BY score DESC
LIMIT 10") ;
if($result) {
while ($row = mysql_fetch_array($result)) {
echo '<li onclick="location.href=\'/'.$row['productCategory'].'/'.$row['productSlug'].'/\';" style="cursor: pointer;"><a href="/'.$row['productCategory'].'/'.$row['productSlug'].'/">
<div class="resultImg"><img src="/image.php?width=24&height=24&image='.$row['productIcon'].'" /></div>
<span class="productName">'.$row['productName'].'</span><br />
'.$row['productOneLine'].'</a></li>';
}
}
} else {
echo '
<ul>
<li>
<div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div>
<span class="productName">Processing...</span><br />
Please keep typing while we process your code</li>
</ul>';
}
}
} else {
echo '
<ul>
<li>
<div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div>
<span class="productName">Processing...</span><br />
Please keep typing while we process your code</li>
</ul>';
}
} else {
echo 'Nothing to see here.';
}
剧本:
function suggest(inputString){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#country').addClass('load');
$.post("/autosuggest.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#country').removeClass('load');
}
});
}
}
function fill(thisValue) {
$('#country').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 600);
}
在XHTML页面上:
<div id="bg_searchMain">
<form id="form" action="#">
<input type="text" style="float:left; display:inline; width:430px; margin:5px 0 0 5px; background:none; border:none;" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" autocomplete="off" />
<!--<img src="images/button_search.gif" alt="Find" id="button_search" />-->
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="suggestionsList"> </div>
</div>
</form>
</div>
关于“接受率”的评论是不必要的,发布此信息对于谷歌而不是声誉更有用。
答案 3 :(得分:0)
我做了像&amp;它成功了,我使用的是mysqli方法。
$q = strtolower($_GET["term"]);
$return = array();
$query = "select name from students where name like '%$q%'";
$result=$conn->query($query);
while ($cresult=$result->fetch_row()){array_push($return,array('label'=>$cresult[0],'value'=>$cresult[0]));
}
echo(json_encode($return));
&GT;