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

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

3. What is Autocomplete in Solr?
Solr-1316: Autosuggest
Based on spellcheck
Ternary Search Trie
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

4. Find SOLR-1316 Patches Solr/Lucene from Apache
Solr/Lucene from Apache
Trunk has Autosuggest already built in 4

5. Find jQuery http://jqueryui.com/demos/autocomplete/#remote
jquery-ui.js
themes/base/jquery-ui.css
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
<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

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

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

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"
</fields> 11

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

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 13

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

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: Important parameters spellcheck=true
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

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

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

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 20

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 22

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

24. Review Find Solr/Lucene project jQuery autocomplete Configure
jQuery autocomplete
Configure
schema.xml, solrconfig.xml
jQuery autocomplete plugin
Search API workaround for jQuery
Run
JQuery and Solr 24

25. Thank You
Questions?
Contact me: