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

于 2013-11-01 22:31:10 发布
阅读量113 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 自动填充
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_11910/article/details/82547113
页面引入三个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.     //http://localhost:8088/solr-src/core0/suggest?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的时候，如下图：

当选择solr时，如下图：

iteye_11910
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值