Implementing Autocomplete with Solr and jQuery

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

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

3. 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!

4. Find • SOLR-1316 Patches 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

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

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

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

8. Data, Documents and Fields <doc> <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>

9. Configure • schema.xml • solrconfig.xml • URL parameters

10. 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.)

11. 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" • indexed="true" stored="true" multiValued="true"/> • </fields>

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

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

14. 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> <str name="field">autocomplete-field</str> <str name="sourceLocation">american-english</str> </lst> </searchComponent>

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

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

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

18. Configure • HTML • jQuery

19. 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> </div> </div>

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

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

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

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

24. Review • Find • Solr/Lucene project 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

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