仿百度搜索输入框提示JS代码(PHP+MySql数据库版)(基于jquery.autocomplete.js插件)

来源：互联网发布：centos配置ip地址编辑：程序博客网时间：2024/05/29 23:23

仿百度搜索输入框提示JS代码(PHP+MySql数据库版)(基于jquery.autocomplete.js插件)

POSTED BY COLDSEA POSTED ON 七 - 31 - 2010 0 COMMENT

HTML代码：

?
1
2
3
4
5
6
7
8
9
<divstyle="margin:0 auto; text-align:center;">
  <h3>仿百度搜索输入框提示JS代码（基于jquery.autocomplete.js插件）</h3>
  <formid="formkeyword"name="formkeyword"method="post"action="post.php">
    <div>
          <inputtype="text"name="keyword"size="40"maxlength="255"value=""id="keyword"></input>
          <inputtype="submit"value="搜索"></input>
    </div>
  </form>
</div>

这是html的搜索框

JS代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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
            }
            );
            });
            functionfindValue(li) {
                if( li == null) returnalert("No match!");
                if( !!li.extra ) varsValue = li.extra[0];
                elsevar sValue = li.selectValue;
                }
            functionselectItem(li) { findValue(li);}
            functionformatItem(row) { returnrow[0];//return row[0] + " (id: " + row[1] + ")"//如果有其他参数调用row[1]，对应输出格式Sparta|896
            }
            functionlookupAjax(){
            varoSuggest = $("#keyword")[0].autocompleter;
            oSuggest.findValue();
            returnfalse;
            }
</script>

Ajax获取后台数据库代码：

getajaxtag.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
/**
* FILE_NAME:getajaxtag.php
* 接收到ajax参数，处理关键字，注意编码
*
* @copyright Copyright (c) 2010-2015  www.phpwebgo.com
* @author  phpwebgo@gmail.com
* @package core
* @version 2010-7-31  下午03:06:35
*/
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";
}
 
functionjs_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);
            elseif ($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;
        }elseif ($str[$i] == '%') {
            $ret.= urldecode ( substr( $str,$i, 3 ) );
            $i+= 2;
        }else
            $ret.= $str[$i];
    }
    return$ret;
}
?>

原文地址：http://www.phpwebgo.com/?p=144