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

仿百度搜索输入框提示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

< div style = "margin:0 auto; text-align:center;" >    < h3 >仿百度搜索输入框提示JS代码（基于jquery.autocomplete.js插件）</ h3 >    < form id = "formkeyword" name = "formkeyword" method = "post" action = "post.php" >      < div >            < input type = "text" name = "keyword" size = "40" maxlength = "255" value = "" id = "keyword" ></ input >            < input type = "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              }              );              });              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

?

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" ; }   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 ; } ?>

 

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