
HTML代码:
<div class="sidebarBlock" style="margin:0 auto; text-align:center;">
<h3>仿百度搜索输入框提示JS代码(基于jquery.autocomplete.js插件)</h3>
<form id="formkeyword" name="formkeyword" method="post" action="post.php">
<div class="sidebarSearch">
<input type="text" name="keyword" size="40" maxlength="255" value="" id="keyword" class="text"></input>
<input type="submit" value="搜索" class="button"></input>
</div>
</form>
</div>
这是html的搜索框
JS代码:
<link href="css/jquery.autocomplete.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#keyword").autocomplete("getajaxtag.php",
{
delay:10,
minChars:1,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:false
}
);
});
function findValue(li) {
if( li == null ) return alert("No match!");
if( !!li.extra ) var sValue = li.extra[0];
else var sValue = li.selectValue;
}
function selectItem(li) { findValue(li);}
function formatItem(row) { return row[0];//return row[0] + " (id: " + row[1] + ")"//如果有其他参数调用row[1],对应输出格式Sparta|896
}
function lookupAjax(){
var oSuggest = $("#keyword")[0].autocompleter;
oSuggest.findValue();
return false;
}
</script>
Ajax获取后台数据库代码:
getajaxtag.php
<?php
include_once ('conn/conn.php');
$keyword = iconv ( 'utf-8', 'GBK', js_unescape ( $_GET ['q'] ) );
$sql = mysql_query ( "SELECT DISTINCT(tagname) FROM uchome_tag WHERE tagname LIKE '%" . $keyword . "%' LIMIT 0,10" );
while ( $value = mysql_fetch_array ( $sql ) ) {
echo $keyword = iconv ( 'GBK', 'utf-8', $value ['tagname'] ) . "n";
}
function js_unescape($str) {
$ret = '';
$len = strlen ( $str );
for($i = 0; $i < $len; $i ++) {
if ($str [$i] == '%' && $str [$i + 1] == 'u') {
$val = hexdec ( substr ( $str, $i + 2, 4 ) );
if ($val < 0x7f)
$ret .= chr ( $val );
else if ($val < 0x800)
$ret .= chr ( 0xc0 | ($val >> 6) ) . chr ( 0x80 | ($val & 0x3f) );
else
$ret .= chr ( 0xe0 | ($val >> 12) ) . chr ( 0x80 | (($val >> 6) & 0x3f) ) . chr ( 0x80 | ($val & 0x3f) );
$i += 5;
} else if ($str [$i] == '%') {
$ret .= urldecode ( substr ( $str, $i, 3 ) );
$i += 2;
} else
$ret .= $str [$i];
}
return $ret;
}
?>
需要的下载吧:下载地址
0 评论:
Post a Comment