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

页面引入三个JS:

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
        <script type="text/javascript" src="js/jquery-ui.js"></script>  
                <script type="text/javascript" src="js/json.js"></script>
  1. 引入JQUERY UI的CSS文件

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

$(function() {  
      
    function log( message ) {  
            $( "<div/>" ).text( message ).prependTo( "#log" );  
            $( "#log" ).scrollTop( 0 );  
        }  
      
    //http://localhost:8088/solr-src/core0/suggest?q=so&wt=json  
    //搜索引擎关键字自动填充  
    $( "#city" ).autocomplete({  
            source: function( request, response ) {  
                $.ajax({  
                      
                    url: "http://localhost:8088/solr-src/core0/suggest",  
                    dataType: "json",  
                    data: {  
                        wt:"json",  
                        q: request.term  
                    },  
                    success: function( data ) {  
                          
                        response(data.spellcheck.suggestions[1].suggestion)  
                    /*  
                        response( $.map( data, function( item ) {  
                            return {  
                                label: item.username,  
                                value: item.username  
                            }  
                        }));  
                    */    
                    }  
                });  
            },  
            minLength: 2,//输入两个字符才会发送请求  
              
            select: function( event, ui ) {  
                log( ui.item ?  
                    "Selected: " + ui.item.label :  
                    "Nothing selected, input was " + this.value);  
                //执行搜索  
                $.getJSON("http://localhost:8088/solr-src/core0/select",  
                { "q": ui.item.label, "version": "2.2","start":0,"rows":10,"indent":"on","wt":"json" },  
                 function(result) {  
                 //显示搜索结果,这里简单显示json字符串  
                 $("div#content").append(JSON.stringify(result.response.docs));  
                  
                  
            });   
                  
            },  
            open: function() {  
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );  
            },  
            close: function() {  
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );  
            }  
              
        });  
});

html代码:

<div class="ui-widget">  
    <label for="city">Your city: </label>  
    <input id="city" />  
</div>  
  
<div class="ui-widget" style="margin-top:2em; font-family:Arial">  
    Result:  
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>  
</div>  
  
</div>

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

<searchComponent name="spellcheck" class="solr.SpellCheckComponent">  
  
    <str name="queryAnalyzerFieldType">textSpell</str>  
  
    <!-- Multiple "Spell Checkers" can be declared and used by this  
         component  
      -->  
  
    <!-- a spellchecker built from a field of the main index, and  
         written to disk  
      -->  
    <lst name="spellchecker">  
      <str name="name">default</str>  
      <str name="field">name</str>  
      <str name="buildOnCommit">true</str>  
      <str name="spellcheckIndexDir">spellchecker</str>  
      <!-- uncomment this to require terms to occur in 1% of the documents   
           in order to be included in the dictionary  
        -->  
      <!-- 
        <float name="thresholdTokenFrequency">.01</float> 
      -->  
    </lst>  
  
    <!-- a spellchecker that uses a different distance measure -->  
    <!--  
       <lst name="spellchecker">  
         <str name="name">jarowinkler</str>  
         <str name="field">spell</str>  
         <str name="distanceMeasure">  
           org.apache.lucene.search.spell.JaroWinklerDistance  
         </str>  
         <str name="spellcheckIndexDir">spellcheckerJaro</str>  
       </lst>  
     -->  
  
    <!-- a spellchecker that use an alternate comparator   
  
         comparatorClass be one of:  
          1. score (default)  
          2. freq (Frequency first, then score)  
          3. A fully qualified class name  
      -->  
    <!--  
       <lst name="spellchecker">  
         <str name="name">freq</str>  
         <str name="field">lowerfilt</str>  
         <str name="spellcheckIndexDir">spellcheckerFreq</str>  
         <str name="comparatorClass">freq</str>  
         <str name="buildOnCommit">true</str>  
      -->  
  
    <!-- A spellchecker that reads the list of words from a file -->  
    <!--  
       <lst name="spellchecker">  
         <str name="classname">solr.FileBasedSpellChecker</str>  
         <str name="name">file</str>  
         <str name="sourceLocation">spellings.txt</str>  
         <str name="characterEncoding">UTF-8</str>  
         <str name="spellcheckIndexDir">spellcheckerFile</str>  
       </lst>  
      -->  
  </searchComponent>  
  
  <!-- A request handler for demonstrating the spellcheck component.    
  
       NOTE: This is purely as an example.  The whole purpose of the  
       SpellCheckComponent is to hook it into the request handler that  
       handles your normal user queries so that a separate request is  
       not needed to get suggestions.  
  
       IN OTHER WORDS, THERE IS REALLY GOOD CHANCE THE SETUP BELOW IS  
       NOT WHAT YOU WANT FOR YOUR PRODUCTION SYSTEM!  
         
       See http://wiki.apache.org/solr/SpellCheckComponent for details  
       on the request parameters.  
    -->  
       
  <requestHandler name="/spell" class="solr.SearchHandler" startup="lazy">  
    <lst name="defaults">  
      <str name="df">text</str>  
      <str name="spellcheck.onlyMorePopular">false</str>  
      <str name="spellcheck.extendedResults">false</str>  
      <str name="spellcheck.count">1</str>  
    </lst>  
    <arr name="last-components">  
      <str>spellcheck</str>  
    </arr>  
  </requestHandler>  
     
      
    <searchComponent class="solr.SpellCheckComponent" name="suggest">  
    <lst name="spellchecker">  
      <str name="name">suggest</str>  
      <str name="classname">org.apache.solr.spelling.suggest.Suggester</str>  
      <str name="lookupImpl">org.apache.solr.spelling.suggest.tst.TSTLookup</str>  
      <!-- Alternatives to lookupImpl:   
           org.apache.solr.spelling.suggest.fst.FSTLookup   [finite state automaton]  
           org.apache.solr.spelling.suggest.fst.WFSTLookupFactory [weighted finite state automaton]  
           org.apache.solr.spelling.suggest.jaspell.JaspellLookup [default, jaspell-based]  
           org.apache.solr.spelling.suggest.tst.TSTLookup   [ternary trees]  
      -->  
      <str name="field">text</str>  <!-- the indexed field to derive suggestions from -->  
      <float name="threshold">0.005</float>  
      <str name="buildOnCommit">true</str>  
<!-- 
      <str name="sourceLocation">american-english</str> 
-->  
    </lst>  
  </searchComponent>  
  <requestHandler class="org.apache.solr.handler.component.SearchHandler" name="/suggest">  
    <lst name="defaults">  
      <str name="spellcheck">true</str>  
      <str name="spellcheck.dictionary">suggest</str>  
      <str name="spellcheck.onlyMorePopular">true</str>  
      <str name="spellcheck.count">5</str>  
      <str name="spellcheck.collate">true</str>  
    </lst>  
    <arr name="components">  
      <str>suggest</str>  
    </arr>  
  </requestHandler>

当输入so的时候,如下图:

当选择solr时,如下图:

时间: 2024-08-22 09:57:34

jquery autocomplete实现solr查询字段自动填充并执行查询的相关文章

jquery autocomplete实现读取sql数据库自动补全TextBox

项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

SpringBoot-Mybatis_Plus学习记录之公共字段自动填充

一.应用场景 平时在建对象表的时候都会有最后修改时间,最后修改人这两个字段,对于这些大部分表都有的字段,每次在新增和修改的时候都要考虑到这几个字段有没有传进去,很麻烦.mybatisPlus有一个很好的解决方案.也就是公共字段自动填充的功能.一般满足下面条件的字段就可以使用此功能: 这个字段是大部分表都会有的. 这个字段的值是固定的,或则字段值是可以在后台动态获取的. 常用的就是last_update_time,last_update_name这两个字段. 二.配置MybatisPlus 导包:

浅谈MyBatis-Plus学习之公共字段自动填充

一.公共字段自动填充简介 顾名思义:就是在更新或插入数据时,如果数据项没有设置,则会填充默认的值 在这里就会涉及到元数据处理接口以及它的两个方法: com.baomidou.mybatisplus.mapper.MetaObjectHandlerinsertFill(MetaObject metaObject)  这个方法是插入数据时自动填充的逻辑方法updateFill(MetaObject metaObject)  这个方法是更新数据时自动填充的逻辑方法 而MetaObject这个是MyBa

winform中的 datagriview 字段自动填充长度

在winfrom 的 datagridview 中 绑定字段 经常回在最后面空出一部分来,显得不美观, 现在教大家如何让它自适应宽度 public static void Autogrid(DataGridView dt) { int width = 0; for (int i = 0; i <dt.Columns.Count; i++) { //将每一列都调整为自动适应模式 dt.AutoResizeColumn(i, DataGridViewAutoSizeColumnMode.AllCel

JQuery自动填充控件:autocomplete(自己稍作了修改)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

jquery autocomplete自动补全

简单用法: $(function(){ var data = "the People's Republic of China".split(" "); $("#autocomplete").autocomplete(data,{minChars:0}).result(function(event,data,formatted){ alert(data); }); }); </script> <input type="t

jquery自动填充输入框

1,这是一个比较简单的页面,你可以复制下来就可以使用.<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成(Autocomplete) - 默认功能</title> <link rel="stylesheet" href="//code.jquery

jQuery.Autocomplete实现自动完成功能-搜索提示功能

$(function(){ var availableTags=["ads","abc","acc"]; $("#tags").autocomplete({source:availableTags}); }); <input type="text" id="tags"> 语法: autocomplete(urlor data, [options] ) 参数: url or d

jQuery.Autocomplete实现自动完成功能(详解)

2.jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表. 2) width (Number) 指定下拉框的宽度,Default: input元素的宽度 3)