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/j
ira/browse/SOLR-1316 Based on spellcheck http//wi
ki.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/autocompl
  ete/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
ltdocgt ltfield name"id"gtSOLR026lt/fieldgt
ltfield name"categories"gtComputerslt/fieldgt
ltfield name"categories"gtSolrlt/fieldgt ltfield
name"categories"gtSearchlt/fieldgt ltfield
name"authors"gtASFlt/fieldgt ltfield
name"description"gtlt/fieldgt ltfield
name"average_rating"gt5.0lt/fieldgt ltfield
name"sales_rank"gt100lt/fieldgt ltfield
name"title"gtSolr Enterprise Searchlt/fieldgt lt/docgt

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
• ltfieldsgt
• ltfield name"authors" type"textgen"
• indexed"true" stored"true"
  multiValued"true"/gt
• ltfield name"title" type"textgen"
• indexed"true" stored"true"/gt
• ltfield name"categories" type"textgen"
  indexed"true"
• stored"true" multiValued"true"/gt
• ltfield name"autocomplete-field" type"string"
• indexed"true" stored"true"
  multiValued"true"/gt
• lt/fieldsgt

12
Configure
schema.xml ltcopyField source"authors"
dest"autocomplete-field"/gt ltcopyField
source"title"
dest"autocomplete-field"/gt ltcopyField
source"categories"
dest"autocomplete-field"/gt
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 ltsearchComponent
name"spellcheck-autocomplete"
class"solr.SpellCheckComponent"gt ltlst
name"spellchecker"gt ltstr name"name"gtsuggestlt/
strgt ltstr name"classname"gt
org.apache.solr.spelling.suggest.Suggester
lt/strgt ltstr name"lookupImpl"gt
org.apache.solr.spelling.suggest.jaspell.JaspellLo
okup lt/strgt ltstr name"field"gtautocomplete-fi
eldlt/strgt ltstr name"sourceLocation"gtamerican-e
nglishlt/strgt lt/lstgt lt/searchComponentgt
15
Configure
Configure
solrconfig.xml Request Handler ltrequestHandler
name"/autocomplete" class"solr.SearchHandler"gt
ltarr name"components"gt ltstrgtspellcheck-aut
ocompletelt/strgt lt/arrgt lt/requestHandlergt
16
Configure

• Autocomplete URL
• http//antikythera-3.local8983/solr/autocomplete?
  spellchecktruespellcheck.dictionarysuggestspel
  lcheck.extendedResultstruespellcheck.count100s
  pellcheck.buildtrueqs
• Important parameters
• spellchecktrue
• spellcheck.buildtrue
• spellcheck.dictionarysuggest

17
Run

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

18
Configure

• HTML
• jQuery

19
Configure
HTML ltdiv class"demo"gt ltdiv class"ui-widget-se
arch ui-widget"gt Search ltbr /gt
ltinput id"search" class"searchInput"/gt
lt/divgt ltdiv class"ui-widget-results
ui-widget"gt Results ltdiv id"results"
style"overflow auto"
class"ui-widget-content"gtlt/divgt lt/divgt lt/divgt
20
Configure

• jQuery autocomplete plugin options
• ( "search" ).autocomplete(
• minLength 1,
• delay10,
• 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/t
  runk/
• jQuery autocomplete
• http//jqueryui.com/demos/autocomplete/remo
  te
• Configure
• schema.xml, solrconfig.xml
• jQuery autocomplete plugin
• Search API workaround for jQuery
• Run
• JQuery and Solr

25
Thank You
Questions? Contact me poakes_at_lulu.com