PHP+JS實(shí)現(xiàn)的實(shí)時(shí)搜索提示功能

第PHP+JS實(shí)現(xiàn)的實(shí)時(shí)搜索提示功能本文實(shí)例講述了PHP+JS實(shí)現(xiàn)的實(shí)時(shí)搜索提示功能。分享給大家供大家參考，具體如下：

效果圖如下：

代碼如下：

HTML代碼：（該代碼用兩種方法實(shí)現(xiàn)，一種Jquery,一種原生JS）

html

head

scriptsrc="/DelphiRequest/search/js/jquery.js"/script

script

/*用原生js實(shí)現(xiàn)

//functionshowResult(str)

//if(str.length==0)

//document.getElementById("livesearch").innerHTML="";

//document.getElementById("livesearch").style.border="0px";

//return;

//if(window.XMLHttpRequest)

//{//IE7+,Firefox,Chrome,Opera,Safari瀏覽器執(zhí)行

//xmlhttp=newXMLHttpRequest();

//else

//{//IE6,IE5瀏覽器執(zhí)行

//xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

//xmlhttp.onreadystatechange=function()

//if(xmlhttp.readyState==4xmlhttp.status==200)

//document.getElementById("livesearch").innerHTML=xmlhttp.responseText;

//document.getElementById("livesearch").style.border="1pxsolid#A5ACB2";

//xmlhttp.open("GET","livesearch.phpq="+str,true);

//xmlhttp.send();

//用jquery實(shí)現(xiàn)

functionshowResult(str){

$.ajax({

type:"GET",

url:"livesearch.php",

datatype:'json',

data:{'q':str},

success:function(data){

document.getElementById("livesearch").innerHTML=data;

document.getElementById("livesearch").style.border="1pxsolid#A5ACB2";

/script

/head

body

form

inputtype="text"size="30"onkeyup="showResult(this.value)"

divid="livesearch"/div

/form

/body

/html

PHP代碼如下：（PHP不僅可以考慮直接使用數(shù)組，也可以考慮直接查詢(xún)數(shù)據(jù)庫(kù)，獲取數(shù)據(jù)庫(kù)內(nèi)容，本代碼使用的是數(shù)組。）

$provinces=array("beijing","tianjin","shanghai","chongqing","hebei","henan","heilongjiang","jilin","changchun",

"shandong","anhui","shanxi","guangzhou","yunnan","hainan","xizang","qinghai","fujian","guizhou","jiangsu",

"zhejiang","guangzhou","yunan","hainan","xizang","neimenggu","sichuan","gansu","ningxia","xianggang","aomen");

$tmp=$_GET['q'];

$val=array();

$k=0;

if(strlen($tmp)0)

for($i=0;$i$i++){

if(strpos($provinces[$i],$tmp)!==false){

//傳遞值給val

$val[$k]=$provinces[$i