Jquery AutoComplete automatically fills in SOLR query fields and performs queries

Three JavaScript codes are introduced on the page:

<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>

Introduce the CSS file of jquery UI

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

$ (Function () {function log (Message) {$ ("<DIV/> "). text (Message ). prependto ("# log"); $ ("# log "). scrolltop (0);} // http: // localhost: 8088/SOLR-src/core0/suggest? Q = So & Wt = JSON // The Search Engine keyword is automatically filled $ ("# 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, // enter The Select: function (event, UI) {log (ui. item? "Selected:" + UI. item. label: "Nothing selected, input was" + this. value); // execute the search $. 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) {// display the search result. The JSON string $ ("Div # Content" ..append(json.stringify(result.response.doc s) is displayed here;});}, open: function () {$ (this ). removeclass ("UI-corner-all "). addclass ("UI-corner-top") ;}, close: function () {$ (this ). removeclass ("UI-corner-top "). addclass ("UI-corner-all ");}});});
 
HTML code:
<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>
Configure the spelling check and auto-completion components in 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>
When so is input, for example:

When SOLR is selected, for example: