0
点赞
收藏
分享

微信扫一扫

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

自由的美人鱼 2023-06-15 阅读 88
自动填充solrapachejsonHarmonyOS后端开发
加载失败

  

1. <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
2. <script type="text/javascript" src="js/jquery-ui.js"></script>  
3. <script type="text/javascript" src="js/json.js"></script>

 



  1. 引入JQUERY UI的CSS文件  

 



  1. <link rel="stylesheet" href="css/redmond/jqstyle.css" type="text/css"></link></head>  

  

1. $(function() {  
2.       
3.     function log( message ) {  
4. <div/>" ).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. });


 

html代码：

  

1. <div class="ui-widget">  
2. <label for="city">Your city: </label>  
3. <input id="city" />  
4. </div>  
5.   
6. <div class="ui-widget" style="margin-top:2em; font-family:Arial">  
7.     Result:  
8. <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>  
9. </div>  
10.   
11. </div>


solrconfig.xml中配置拼写检查和自动补全组件:



1. <searchComponent name="spellcheck" class="solr.SpellCheckComponent">  
2.   
3. <str name="queryAnalyzerFieldType">textSpell</str>  
4.   
5.     <!-- Multiple "Spell Checkers" can be declared and used by this  
6.          component  
7. >  
8.   
9.     <!-- a spellchecker built from a field of the main index, and  
10.          written to disk  
11. >  
12. <lst name="spellchecker">  
13. <str name="name">default</str>  
14. <str name="field">name</str>  
15. <str name="buildOnCommit">true</str>  
16. <str name="spellcheckIndexDir">spellchecker</str>  
17.       <!-- uncomment this to require terms to occur in 1% of the documents   
18.            in order to be included in the dictionary  
19. >  
20. <!--
21.         <float name="thresholdTokenFrequency">.01</float>
22.       -->  
23. </lst>  
24.   
25. <!-- a spellchecker that uses a different distance measure -->  
26.     <!--  
27. <lst name="spellchecker">  
28. <str name="name">jarowinkler</str>  
29. <str name="field">spell</str>  
30. <str name="distanceMeasure">  
31.            org.apache.lucene.search.spell.JaroWinklerDistance  
32. </str>  
33. <str name="spellcheckIndexDir">spellcheckerJaro</str>  
34. </lst>  
35. >  
36.   
37.     <!-- a spellchecker that use an alternate comparator   
38.   
39.          comparatorClass be one of:  
40.           1. score (default)  
41.           2. freq (Frequency first, then score)  
42.           3. A fully qualified class name  
43. >  
44.     <!--  
45. <lst name="spellchecker">  
46. <str name="name">freq</str>  
47. <str name="field">lowerfilt</str>  
48. <str name="spellcheckIndexDir">spellcheckerFreq</str>  
49. <str name="comparatorClass">freq</str>  
50. <str name="buildOnCommit">true</str>  
51. >  
52.   
53. <!-- A spellchecker that reads the list of words from a file -->  
54.     <!--  
55. <lst name="spellchecker">  
56. <str name="classname">solr.FileBasedSpellChecker</str>  
57. <str name="name">file</str>  
58. <str name="sourceLocation">spellings.txt</str>  
59. <str name="characterEncoding">UTF-8</str>  
60. <str name="spellcheckIndexDir">spellcheckerFile</str>  
61. </lst>  
62. >  
63. </searchComponent>  
64.   
65.   <!-- A request handler for demonstrating the spellcheck component.    
66.   
67.        NOTE: This is purely as an example.  The whole purpose of the  
68.        SpellCheckComponent is to hook it into the request handler that  
69.        handles your normal user queries so that a separate request is  
70.        not needed to get suggestions.  
71.   
72.        IN OTHER WORDS, THERE IS REALLY GOOD CHANCE THE SETUP BELOW IS  
73.        NOT WHAT YOU WANT FOR YOUR PRODUCTION SYSTEM!  
74.          
75.        See http://wiki.apache.org/solr/SpellCheckComponent for details  
76.        on the request parameters.  
77. >  
78.        
79. <requestHandler name="/spell" class="solr.SearchHandler" startup="lazy">  
80. <lst name="defaults">  
81. <str name="df">text</str>  
82. <str name="spellcheck.onlyMorePopular">false</str>  
83. <str name="spellcheck.extendedResults">false</str>  
84. <str name="spellcheck.count">1</str>  
85. </lst>  
86. <arr name="last-components">  
87. <str>spellcheck</str>  
88. </arr>  
89. </requestHandler>  
90.      
91.       
92. <searchComponent class="solr.SpellCheckComponent" name="suggest">  
93. <lst name="spellchecker">  
94. <str name="name">suggest</str>  
95. <str name="classname">org.apache.solr.spelling.suggest.Suggester</str>  
96. <str name="lookupImpl">org.apache.solr.spelling.suggest.tst.TSTLookup</str>  
97.       <!-- Alternatives to lookupImpl:   
98.            org.apache.solr.spelling.suggest.fst.FSTLookup   [finite state automaton]  
99.            org.apache.solr.spelling.suggest.fst.WFSTLookupFactory [weighted finite state automaton]  
100.            org.apache.solr.spelling.suggest.jaspell.JaspellLookup [default, jaspell-based]  
101.            org.apache.solr.spelling.suggest.tst.TSTLookup   [ternary trees]  
102. >  
103. <str name="field">text</str>  <!-- the indexed field to derive suggestions from -->  
104. <float name="threshold">0.005</float>  
105. <str name="buildOnCommit">true</str>  
106. <!--
107.       <str name="sourceLocation">american-english</str>
108. -->  
109. </lst>  
110. </searchComponent>  
111. <requestHandler class="org.apache.solr.handler.component.SearchHandler" name="/suggest">  
112. <lst name="defaults">  
113. <str name="spellcheck">true</str>  
114. <str name="spellcheck.dictionary">suggest</str>  
115. <str name="spellcheck.onlyMorePopular">true</str>  
116. <str name="spellcheck.count">5</str>  
117. <str name="spellcheck.collate">true</str>  
118. </lst>  
119. <arr name="components">  
120. <str>suggest</str>  
121. </arr>  
122. </requestHandler>


当输入so的时候，如下图：

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

当选择solr时，如下图：

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






页面引入三个JS：


  

1. <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
2. <script type="text/javascript" src="js/jquery-ui.js"></script>  
3. <script type="text/javascript" src="js/json.js"></script>

 



  1. 引入JQUERY UI的CSS文件  

 



  1. <link rel="stylesheet" href="css/redmond/jqstyle.css" type="text/css"></link></head>  




 

1. $(function() {  
2.       
3.     function log( message ) {  
4. <div/>" ).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. });



 

html代码：



1. <div class="ui-widget">  
2. <label for="city">Your city: </label>  
3. <input id="city" />  
4. </div>  
5.   
6. <div class="ui-widget" style="margin-top:2em; font-family:Arial">  
7.     Result:  
8. <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>  
9. </div>  
10.   
11. </div>


solrconfig.xml中配置拼写检查和自动补全组件:


1. <searchComponent name="spellcheck" class="solr.SpellCheckComponent">  
2.   
3. <str name="queryAnalyzerFieldType">textSpell</str>  
4.   
5.     <!-- Multiple "Spell Checkers" can be declared and used by this  
6.          component  
7. >  
8.   
9.     <!-- a spellchecker built from a field of the main index, and  
10.          written to disk  
11. >  
12. <lst name="spellchecker">  
13. <str name="name">default</str>  
14. <str name="field">name</str>  
15. <str name="buildOnCommit">true</str>  
16. <str name="spellcheckIndexDir">spellchecker</str>  
17.       <!-- uncomment this to require terms to occur in 1% of the documents   
18.            in order to be included in the dictionary  
19. >  
20. <!--
21.         <float name="thresholdTokenFrequency">.01</float>
22.       -->  
23. </lst>  
24.   
25. <!-- a spellchecker that uses a different distance measure -->  
26.     <!--  
27. <lst name="spellchecker">  
28. <str name="name">jarowinkler</str>  
29. <str name="field">spell</str>  
30. <str name="distanceMeasure">  
31.            org.apache.lucene.search.spell.JaroWinklerDistance  
32. </str>  
33. <str name="spellcheckIndexDir">spellcheckerJaro</str>  
34. </lst>  
35. >  
36.   
37.     <!-- a spellchecker that use an alternate comparator   
38.   
39.          comparatorClass be one of:  
40.           1. score (default)  
41.           2. freq (Frequency first, then score)  
42.           3. A fully qualified class name  
43. >  
44.     <!--  
45. <lst name="spellchecker">  
46. <str name="name">freq</str>  
47. <str name="field">lowerfilt</str>  
48. <str name="spellcheckIndexDir">spellcheckerFreq</str>  
49. <str name="comparatorClass">freq</str>  
50. <str name="buildOnCommit">true</str>  
51. >  
52.   
53. <!-- A spellchecker that reads the list of words from a file -->  
54.     <!--  
55. <lst name="spellchecker">  
56. <str name="classname">solr.FileBasedSpellChecker</str>  
57. <str name="name">file</str>  
58. <str name="sourceLocation">spellings.txt</str>  
59. <str name="characterEncoding">UTF-8</str>  
60. <str name="spellcheckIndexDir">spellcheckerFile</str>  
61. </lst>  
62. >  
63. </searchComponent>  
64.   
65.   <!-- A request handler for demonstrating the spellcheck component.    
66.   
67.        NOTE: This is purely as an example.  The whole purpose of the  
68.        SpellCheckComponent is to hook it into the request handler that  
69.        handles your normal user queries so that a separate request is  
70.        not needed to get suggestions.  
71.   
72.        IN OTHER WORDS, THERE IS REALLY GOOD CHANCE THE SETUP BELOW IS  
73.        NOT WHAT YOU WANT FOR YOUR PRODUCTION SYSTEM!  
74.          
75.        See http://wiki.apache.org/solr/SpellCheckComponent for details  
76.        on the request parameters.  
77. >  
78.        
79. <requestHandler name="/spell" class="solr.SearchHandler" startup="lazy">  
80. <lst name="defaults">  
81. <str name="df">text</str>  
82. <str name="spellcheck.onlyMorePopular">false</str>  
83. <str name="spellcheck.extendedResults">false</str>  
84. <str name="spellcheck.count">1</str>  
85. </lst>  
86. <arr name="last-components">  
87. <str>spellcheck</str>  
88. </arr>  
89. </requestHandler>  
90.      
91.       
92. <searchComponent class="solr.SpellCheckComponent" name="suggest">  
93. <lst name="spellchecker">  
94. <str name="name">suggest</str>  
95. <str name="classname">org.apache.solr.spelling.suggest.Suggester</str>  
96. <str name="lookupImpl">org.apache.solr.spelling.suggest.tst.TSTLookup</str>  
97.       <!-- Alternatives to lookupImpl:   
98.            org.apache.solr.spelling.suggest.fst.FSTLookup   [finite state automaton]  
99.            org.apache.solr.spelling.suggest.fst.WFSTLookupFactory [weighted finite state automaton]  
100.            org.apache.solr.spelling.suggest.jaspell.JaspellLookup [default, jaspell-based]  
101.            org.apache.solr.spelling.suggest.tst.TSTLookup   [ternary trees]  
102. >  
103. <str name="field">text</str>  <!-- the indexed field to derive suggestions from -->  
104. <float name="threshold">0.005</float>  
105. <str name="buildOnCommit">true</str>  
106. <!--
107.       <str name="sourceLocation">american-english</str>
108. -->  
109. </lst>  
110. </searchComponent>  
111. <requestHandler class="org.apache.solr.handler.component.SearchHandler" name="/suggest">  
112. <lst name="defaults">  
113. <str name="spellcheck">true</str>  
114. <str name="spellcheck.dictionary">suggest</str>  
115. <str name="spellcheck.onlyMorePopular">true</str>  
116. <str name="spellcheck.count">5</str>  
117. <str name="spellcheck.collate">true</str>  
118. </lst>  
119. <arr name="components">  
120. <str>suggest</str>  
121. </arr>  
122. </requestHandler>


当输入so的时候，如下图：

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

当选择solr时，如下图：

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

举报

相关推荐

autocomplete 自动填充

jqueryjavascriptcss系统/运维

solr查询语法

solrJava字段Redis数据库

Solr查询详解

solr字段搜索操作符JavaScript前端开发

jQuery.Autocomplete实现自动完成功能（详解）

javascriptphpc#ViewUIjqueryJava后端开发

oracle select字段有子查询会每次执行子查询吗

数据库oracle

公共字段自动填充--AOP

字段自定义数据库操作Java后端开发

mybatis自动填充时间字段

sql拦截器ide虚拟化云计算

jquery.autocomplete 搜索自动补全插件

javascriptphp数据库ViewUI缓存Html/CSS前端开发

SQL：查询结果新增自增自动字段

自增虚拟化云计算

solr functionquery函数查询自定义函数实现

redis开源数据库缓存
0 条评论
加载失败