Thursday, August 19, 2010

仿百度搜索输入框提示JS代码(PHP+MySql数据库版

转自:http://bbs.phpchina.com/thread-190409-1-1.html

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