jquery autocomplete实现solr查询字段自动填充并执行查询

1.   
2.   
3. 

1. $(function() {  
2.       
3.     function log( message ) {  
4. 
" ).text( message ).prependTo( "#log" );  
5.             $( "#log" ).scrollTop( 0 );  
6.         }  
7.       
8. q=so&wt=json  
9.     //搜索引擎关键字自动填充  
10.     $( "#city" ).autocomplete({  
11.             source: function( request, response ) {  
12.                 $.ajax({  
13.                       
14.                     url: "http://localhost:8088/solr-src/core0/suggest",  
15.                     dataType: "json",  
16.                     data: {  
17.                         wt:"json",  
18.                         q: request.term  
19.                     },  
20.                     success: function( data ) {  
21.                           
22.                         response(data.spellcheck.suggestions[1].suggestion)  
23.                     /*  
24.                         response( $.map( data, function( item ) {  
25.                             return {  
26.                                 label: item.username,  
27.                                 value: item.username  
28.                             }  
29.                         }));  
30.                     */    
31.                     }  
32.                 });  
33.             },  
34.             minLength: 2,//输入两个字符才会发送请求  
35.               
36.             select: function( event, ui ) {  
37.                 log( ui.item ?  
38.                     "Selected: " + ui.item.label :  
39.                     "Nothing selected, input was " + this.value);  
40.                 //执行搜索  
41.                 $.getJSON("http://localhost:8088/solr-src/core0/select",  
42.                 { "q": ui.item.label, "version": "2.2","start":0,"rows":10,"indent":"on","wt":"json" },  
43.                  function(result) {  
44.                  //显示搜索结果,这里简单显示json字符串  
45.                  $("div#content").append(JSON.stringify(result.response.docs));  
46.                   
47.                   
48.             });   
49.                   
50.             },  
51.             open: function() {  
52.                 $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );  
53.             },  
54.             close: function() {  
55.                 $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );  
56.             }  
57.               
58.         });  
59. });

1. 
  
2. Your city:   
3.   
4. 
  
5.   
6. 
  
7.     Result:  
8. 
  
9. 
  
10.   
11.