Ajax实现搜索提示功能

在http://www.w3school.com.cn/ajax/ajax_asp_php.asp 中介绍了ajax实现搜索人名，但这只基于英文搜索，在本案例中，我在链接的功能基础上实现中文的搜索，同时，匹配完成可以通过点击匹配成功的词将词语传入表单，实现搜索。

代码部分：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="gb2312">
 5 <style type="text/css">
 6     body:active{
 7         color:red;
 8     }
 9     div{
10         cursor:pointer;
11     }
12 </style>
13 <script type="text/javascript" src="../../jquery-3.1.1.min.js"></script>
14 <script type="text/javascript">
15 
16 var xmlHttp=null;
17 
18 
19 <!--请求数据操作-->
20 function showHint(str)
21 {
22 if (str.length==0)
23   { 
24   document.getElementById("txtHint").innerHTML="";
25   return;
26   }
27 try
28   {// Firefox, Opera 8.0+, Safari, IE7
29   xmlHttp=new XMLHttpRequest();
30   }
31 catch(e)
32   {// Old IE
33   try
34     {
35     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
36     }
37   catch(e)
38     {
39     alert ("Your browser does not support XMLHTTP!");
40     return;  
41     }
42 }
43 var url="gethint.php?q=" + str;
44 url=url+"&sid="+Math.random(); 
45 xmlHttp.open("GET",url,false);
46 xmlHttp.send(null);
47 document.getElementById(\'txt2\').innerHTML=xmlHttp.responseText;
48 }
49 <!--实现点击提示词后传入表单中-->
50 function sendData(){
51   $("div div div").click(function(){
52   $(\'#txt1\').val($(this).html());
53   })
54 };
55 </script> 
56 </head>
57 <body>
58 <form> 
59 <input type="text" id="txt1" placeholder="请输入搜索内容" onkeyup="showHint(this.value)" onblur="sendData()">
60 </form>
61 </br>
62 <div id="txt2"></div>
63 </body>
64 </html>

PHP部分加入了两个功能，一个是加入数组的搜索匹配条件，另一个是在传入值中增加<div>可实现HTML页面中的点击提示词传入表单功能，代码如下：

 1 <?php
 2 header("Content-Type:text/html;charset=gb2312");
 3 // 用名字来填充字符串
 4 $a[]="chuan川藏骑行";
 5 $a[]="成都";
 6 $a[]="雅安";
 7 $a[]="新沟";
 8 $a[]="新都桥";
 9 $a[]="新疆";
10 $a[]="康定";
11 $a[]="折多塘";
12 $a[]="相克宗村";
13 $a[]="红龙乡";
14 $a[]="禾尼乡";
15 $a[]="巴塘";
16 $a[]="芒康";
17 $a[]="登巴村";
18 $a[]="田妥镇";
19 $a[]="八宿";
20 $a[]="然乌";
21 $a[]="然乌湖";
22 $a[]="来古冰川";
23 $a[]="波密";
24 $a[]="排龙";
25 $a[]="八一";
26 $a[]="工布江达";
27 $a[]="日多";
28 $a[]="松多";
29 $a[]="米拉雪山";
30 $a[]="布达拉宫";
31 $a[]="尼洋河";
32 $a[]="金沙江";
33 $a[]="abc";
34 
35 //获得来自 URL 的 q 参数
36 $q=$_GET["q"];
37 
38 //如果 q 大于 0，则查找数组中的所有提示
39 if (strlen($q) > 0)
40   {
41   $hint="";
42   for($i=0; $i<count($a); $i++)
43     {
44   //修改匹配条件实现汉语的搜索提示
45     if ($q==substr($a[$i],0,strlen($q))||strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
46       {
47       if ($hint=="")
48         {
49         $hint=$a[$i];
50         }
51       else
52         {
53  //加入<div>标签可以实现HTML页面中的点击提示词传入表单功能
54         $hint="<div>".$hint."</div>"."<div>".$a[$i];
55         }
56       }
57     }
58   }
59 
60 // 如果未找到提示，则把输出设置为 "no suggestion"
61 // 否则设置为正确的值
62 if ($hint == "")
63   {
64   $response="no suggestion";
65   }
66 else
67   {
68   $response=$hint;
69   }
70 
71 //输出响应
72 echo $response;
73 ?>

实现中文搜索要保证两者的编码方式相同，通过测试发现charset=utf-8时会出现网页乱码现象，这里使用charset=gb2312可以保证在IE和谷歌浏览器中测试正常，但在火狐浏览器中该提示功能无法实现，这个问题暂时无法解决，有更好方法的同行希望能提出解决方案~~~