你點擊需要的數據后,這個數據寫如到當前輸入框,并在后面添加逗號隔開,繼續輸入的時候,后臺處理繼續輸出數據以供選擇.

下面我們來看實例,html代碼如下:

1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
2. ajax實時獲取下拉數據</pre>  
3. <style><!--  
4. .input_s{ position:relative}  
5. .input_s ul{ list-style:none; margin:0; padding:0; width:200px; border:1px solid #ccc; border-bottom:none}  
6. .input_s ul li{ border-bottom:1px solid #ccc}  
7. .input_s ul li:hover{ color:#fff; background:#000}  
8. --></style>  
9. <pre></pre>  
10. <div class="input_s"><input class="tla" id="tla" style="width: 500px;" type="text" name="tla" />  
11. </div>  
12. <pre>  
13. <script type="text/javascript">// <![CDATA[  
14. var funjieliu = function(fn, delay){//函數節流  add by shanmao 2013 - 1 - 18  
15.     var timer = null;  
16.     return function(){  
17.         var context = this, args = arguments;  
18.         clearTimeout(timer);  
19.         timer = setTimeout(function(){  
20.             fn.apply(context, args);  
21.         }, delay);  
22.     };  
23.  };  
24. document.getElementById("tla").onkeyup=funjieliu(function(){//鍵盤按下的時候  
25.     var tla = $("#tla").val();  
26.     if(tla){  
27.         $.post("/cityosweb/default.php/shanmao/input_xiala",{tla:tla},function(data){  
28.             if(data.status==1){  
29.                 $(".inul").html("");  
30.                 $.each(data.data,function(index,val){  
31.                     $(".inul").append("  
32.     <li>"+val.username+"</li>  
33.    
34. ");  
35.                     });  
36.             }  
37.             },"json");  
38.         }  
39.     },500);  
40. $(function(){  
41.     $(".inul li").live("click",function(){  
42.         var thval = $(this).html();  
43.         var tla = $("#tla").val();  
44.         var regexp = new RegExp(",");  
45.         if(regexp.test(tla)){//如果input有值（","）則加上input里面的值  
46.         $("#tla").val(tla+thval+",");  
47.             }else{  
48.         $("#tla").val(thval+",");  
49.                 }  
50.         $(".inul").html("");  
51.         $("#tla").focus();  
52.         });  
53.     });  
54. // ]]></script> 

PHP代碼如下:

1. function input_xiala(){  
2.     $input = new input();  
3.     $tval = $input->post('tla');  
4.     $u = M('User');  
5.     if(strpos($tval,",")){//檢查是否帶有","  
6.         $val = explode(",",$tval);//拆分成數組  
7.         $tval = end($val);//數組的最后一個值  
8.         }  
9.     $re = $u->field('username,email')->where("username like '$tval%'")->limit(10)->select();  
10.     $this->ajaxReturn($re,'success',1);  
11.     }