Implementing Autocomplete with Solr and jQuery Magic Made Easy by Paul Oakes 1

Objectives Find Solr/Lucene project jQuery autocomplete Configure schema.xml, solrconfig.xml jQuery autocomplete plugin Search API workaround for jQuery Run Solr searching

What is Autocomplete in Solr? Solr-1316: Autosuggest https://issues.apache.org/jira/browse/SOLR-1316 Based on spellcheck http://wiki.apache.org/solr/SpellCheckComponent Ternary Search Trie http://www.javaworld.com/javaworld/jw-02-2001/jw-0216-ternary.html A Ternary Search Trie is a data structure for storing strings that is ideal for practical use in sorting and searching data. Let's get started! 3

Find SOLR-1316 Patches Solr/Lucene from Apache https://issues.apache.org/jira/browse/SOLR-1316 Solr/Lucene from Apache http://svn.apache.org/repos/asf/lucene/dev/trunk/ Trunk has Autosuggest already built in 4

Find jQuery http://jqueryui.com/demos/autocomplete/#remote http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/ jquery-ui.js themes/base/jquery-ui.css http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete. css

What to Autocomplete? “Who's your data?”

What to autocomplete? What is searchable in the index? What data is useful to autocomplete? Lets look at the document data

Data, Documents and Fields <field name="id">SOLR026</field> <field name="categories">Computers</field> <field name="categories">Solr</field> <field name="categories">Search</field> <field name="authors">ASF</field> <field name="description"></field> <field name="average_rating">5.0</field> <field name="sales_rank">100</field> <field name="title">Solr Enterprise Search</field> </doc> 8

Configure schema.xml solrconfig.xml URL parameters 9

Configure schema.xml http://wiki.apache.org/solr/SchemaXml Lives in $SOLR_HOME/conf Field Types Defines datatypes, tokenizers and filters. Fields Defines the fields that are stored in the search index. Copy Fields Instruction to copy value of one defined field in to another. Autocomplete uses copyField(s.) 10

Configure schema.xml <fields> <field name="authors" type="textgen" indexed="true" stored="true" multiValued="true"/> <field name="title" type="textgen" indexed="true" stored="true"/> <field name="categories" type="textgen" indexed="true" stored="true" multiValued="true"/> <field name="autocomplete-field" type="string" </fields> 11

Configure schema.xml <copyField source="authors" dest="autocomplete-field"/> <copyField source="title" <copyField source="categories" 12

Configure solrconfig.xml http://wiki.apache.org/solr/SolrConfigXml Lives in $SOLR_HOME/conf Defines Index defaults, deletion policy Update handlers Caches Event listeners, e.g. new and first searchers Request handlers (API) Search components Response writers 13

Configure solrconfig.xml Search Component <searchComponent name="spellcheck-autocomplete" class="solr.SpellCheckComponent"> <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.jaspell.JaspellLookup <str name="field">autocomplete-field</str> <str name="sourceLocation">american-english</str> </lst> </searchComponent> 14

Configure Configure solrconfig.xml Request Handler <requestHandler name="/autocomplete" class="solr.SearchHandler"> <arr name="components"> <str>spellcheck-autocomplete</str> </arr> </requestHandler>

Configure Autocomplete URL: Important parameters spellcheck=true http://antikythera- 3.local:8983/solr/autocomplete?spellcheck=true&spellcheck. dictionary=suggest&spellcheck.extendedResults=true&spellc heck.count=100&spellcheck.build=true&q=s Important parameters spellcheck=true spellcheck.build=true spellcheck.dictionary=suggest

Run Build and run Solr Add documents Populate autocomplete search component Demonstration of autocomplete 17

Configure HTML jQuery

Configure HTML <div class="demo"> <div class="ui-widget-search ui-widget"> Search: <br /> <input id="search" class="searchInput"/> </div> <div class="ui-widget-results ui-widget"> Results: <div id="results" style="overflow: auto;" class="ui-widget-content"></div> 19

Configure jQuery autocomplete plugin options $( "#search" ).autocomplete({ minLength: 1, delay:10, source: function(request, response) { minLength: min. typed characters delay: millisecond keystroke delay source: data to use, can be array, string or callback disabled 20

Configure jQuery autocomplete plugin events $( "#search" ).autocomplete({ select: function( event, ui ), focus: function( event, ui ) Both events add ajax results to #results

Configure jQuery Cross Site Scripting blocking: Cross Site Scripting prevention in jQuery includes port! Test going directly to Solr - will get "Canceled opening the page” Work around: proxy API for jQuery to Solr 22

Run Build and run jQuery Web App & Solr Add documents Demonstration of autocomplete 23

Review Find Solr/Lucene project jQuery autocomplete Configure http://svn.apache.org/repos/asf/lucene/dev/trunk/ jQuery autocomplete http://jqueryui.com/demos/autocomplete/#remote Configure schema.xml, solrconfig.xml jQuery autocomplete plugin Search API workaround for jQuery Run JQuery and Solr 24

Thank You Questions? Contact me: poakes@lulu.com