jquery.autocomplete.js 文本框自动填充 类似百度搜索引擎效果

后台返回数据格式:

               public  void  doPost(HttpServletRequest request, HttpServletResponse response)

                                      throws  ServletException, IOException {

                          try  {

                                    request.setCharacterEncoding(  "utf-8" );

                                    response.setContentType(  "text/html" );

                                    response.setCharacterEncoding(  "utf-8" );

                                    JDBCData data=  new  JDBCData();

                                    List<Article> arList = data.queryDataList();  

                                    ObjectMapper om=  new  ObjectMapper();

                                    om.writeValue(response. getOutputStream(),arList);

                        }  catch  (Exception e) {

                                      //  TODO  Auto-generated catch block

                                    System.  err .println(  "全文检索失败"  );

                        }

            

            }

< html  xmlns = "http://www.w3.org/1999/xhtml" >

< head  runat = "server" >

     < title  > 自定义提示  </ title  >

     < script  type  = "text/javascript"  src = "./js/jquery-1.4.2.min.js" ></  script >

     < script  type  = "text/javascript"  src = "./js/jquery.autocomplete.js" ></  script >

     < link  rel  = "Stylesheet"  href = "./css/jquery.autocomplete.css"  />

     < script  type  = "text/javascript" >

                          var  dataArrs  ;    

             $ (  function ()  {

                          $ .  ajax ({

                                                              type :  "post" ,

                                                              url :  "./LuceneServlet.do"  ,

                                                              data :  null ,

                                                              dataType :  "json" ,

                                                              cache :  true ,

                                                              async :  false ,

                                                              success :  function  ( data  )  {      

                                                                         dataArrs  = data  ;

                                                              }

                                                  }  );   

                 $ (  '#keyword' ). autocomplete  ( dataArrs  ,  {

                     max :  12 ,       //列表里的条目数

                     minChars :  0 ,       //自动完成激活之前填入的最小字符

                     width :  400 ,        //提示的宽度，溢出隐藏

                     scrollHeight :  300 ,     //提示的高度,溢出显示滚动条

                     matchContains :  true ,//包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示

                     autoFill :  false ,       //自动填充

                     formatItem :  function ( row  ,  i  ,  max  )  {

                         return    row  . title  ;

                     },

                     formatMatch :  function ( row  ,  i  ,  max  )  {

                         return  row  . title  ;

                     },

                     formatResult :  function ( row  )  {

                         return  row  . title  ;

                     }

                 }). result  ( function (  event ,  row  ,  formatted  )  {

                          alert (  row .  title );

                 });

             });

     </ script >

</ head >

< body >

     < form  id  = "form1"  runat = "server" >

     < div  >

         < input  id  = "keyword"  />

     </ div  >

     </ form  >

</ body >

</ html >