1 / 25

Implementing Autocomplete with Solr and jQuery

Discover how to seamlessly implement jQuery Autocomplete in your Solr/Lucene project. This guide covers configuring `schema.xml` and `solrconfig.xml` to enable effective search suggestions, effectively utilizing the jQuery Autocomplete plugin alongside Solr's Autosuggest feature. Learn about indexing strategies, optimizing document data for autocomplete, and configuring key parameters for efficient search results. Follow through with practical examples on setting up autocomplete URL parameters that enhance user experience and streamline the search process.

lavinia-peterson
Télécharger la présentation

Implementing Autocomplete with Solr and jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related