jquery 完成百度藏尾词功能 自动补全功能

一    直接先引入jquery-ui.js   大家可以在这里进行 jquery-ui下载

 

二  我们要有有个input框进行内容的输入，并且在下面写一个隐藏的div用于显示查出的补全信息

 

        <input type="text" id="inputid" class="inputclass">

       <div class="hide_div"></div>

 

三  然后就是我们的相关就是代码了，   当然如果有css样式要求可以根据项目实际情况去写

  <script type="text/javascript">
     $(document).ready(function(){
         
          $("#inputid").autocomplete({  
            source: [ 

      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
   ];
  </script>

 

       当然如果是比较复杂一点的用接口进行查数据的话可以这样

 <script type="text/javascript">
  
  
     $(document).ready(function(){
         
          $("#inputid").autocomplete({  
            source: function( request, response ) {  
                $.ajax({  
                     url : "您的URL",  
                     type : "post",  
                     data : {localName : $("#input_localName").val()},
                     dataType : "json",  
                     success: function( jsonData ) {  
                        var data =  eval(jsonData);
                        var context = "";
                        response( $.map( data, function( item ) {  
                            /*获取后台匹配到的返回值*/
                            var name = item.localName+"";
                            var neId = item.managedElement+"";
                            /*拼接补全div内容  */
                         context = context + "<div class='append_div'><span class='append_span' οnclick=select('"+name+"')>"+name+"</span><div>";
                        }));  
                        if(context != ""){
                             $(".hide_div").html("");  /* 清空上一次补全div中的内容 */
                             $(".hide_div").append(context);
                             $(".hide_div").show();
                        }else{
                             $(".hide_div").hide();
                        }
                       
                    }  
               });
            }, 
            
         });
          
         /*鼠标点击其他地方，补全的div消失  */
         $("body").mouseup(function(){
             $(".hide_div").hide();
         });
         
     
         
         
     })
     
     /*该方法是再拼接div内容时加上的，即鼠标选中的时候，input框输入选中值  */
     function select(name){
             $("#inputid").val(name);
             $(".hide_div").hide();
     }
     
  </script>