你点击需要的数据后,这个数据写如到当前输入框,并在后面添加逗号隔开,继续输入的时候,后台处理继续输出数据以供选择.

下面我们来看实例,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.     } 

Tags: php+ajax 实时获取 下拉数据

分享到：