Autosuggest in Primo

Tags: jQuery, suggestions, autosuggest 00code00
Last Updated: Apr 04, 2012 19:17

Description
The Primo UI is very flexible and can be modified to the customer needs. One possibility you have in Primo is to use jQuery to check and include external data and services. This code contribution uses existing code from the jQuery user interface website ( http://jqueryui.com/demos/autocomplete/ ) and explains how easily you can integrate an autosuggest service in the Primo searchbox.
Author: Timm Siewert
Additional author(s):
Institution: Ex Libris
Year: 2011
License: MIT license
Link to terms: check jQuery website
Skill required for using this code:
basic

State

In Development

Programming language

Javascript, jQuery

Software requirements

Javascript, jQuery

Screen captures

Download

Copy and paste the script code in the footer.html in fe_web/static_htmls:

http://docs.jquery.com/Plugins/autocomplete#Example

You need to change #example to #search_field - as this adresses the Primo search box.

Working example

http://tinyurl.com/42uvlq8 (customized code)

Installation instructions

This code is taken from the jQuery website. You need to copy the code in the footer.html in fe_web/static_htmls:

You can include in "var data" an alphabetical list of words (extracted from your local resources, etc.) This works without a database with thousands of terms. The jQuery user interface also gives the suggestion to use for example MySQL: http://jqueryui.com/demos/autocomplete/

To localize the files you can download main.css, jquery.autocomplete.css, jquery.bgiframe.min.js, jquery.dimensions.js and jquery.autocomplete.js from http://jqueryui.com/demos/autocomplete/default.html - and store them in your local environment. You need to customize the main.css to let it fit to your local Primo.css.