Robot_DJ

Remote Objects Autocomplete

Remote Objects are generally available (GA) with the Winter ’15 release.  They provide a way to perform simple CRUD operations on an object through the use of JavaScript.  In my last article I detailed code for a Remote Object implementation of infinite scrolling.  This article explores the use of Remote Objects with a jQuery UI Autocomplete Widget to provide an enhanced text input for Contacts.  All code is available on GitHub.

Page Markup

The Remote Object is defined in the apex:remoteObjectModel standard component.  All fields that will be used anywhere in the JavaScript must be specified.

The HTML for the search is very simple.

It provides a text input that will be turned into a jQuery UI Autocomplete widget and a div to output some additional information about each Contact as they are moused over in the auto complete list.  Both are inside of a containing div for styling purposes.  Below is the result of typing “Ja” into the text box and then mousing over the “Jane Grey” suggestion.

auto complete widget in action

The JavaScript

The jQuery UI Autcomplete Widget requires a “source” property to be specified.  It defines the data source for the suggestions.  One of the options is to specify a JavaScript function.  That is used to specify a function that contains the Remote Object retrieve call.  The autcomplete has been set to only trigger when at least two characters have been entered and there is a delay of half of a second.  This is done for efficiency reasons and is not noticeable.  The minLength and delay values can be tweeked as needed.

The Remote Object instance is created and then the retrieve is called with the where clause built dynamically using the term property provided by the jQuery UI Autocomplete Widget.  The results are passed to the “response” function provided by the jQuery UI Autocomplete Widget.  The jQuery UI specification states that each item can have two properties, label and value.  Since the item is just a simple Object, Email, Phone, and MobilePhone fields can be added so that they can be used in the summary section.

The jQuery UI Autocomplete Widget provides the ability to override the default behavior of the select and focus actions by specifying functions for its select and focus properties.  This allows the code to extract the additional, custom, information out of the item and display it in the summary section.

Summary

This article showed how an autocomplete text box can be created with a little bit of jQuery UI powered JavaScript combined with the power of Remote Objects. To learn more about Remote Objects, check out the Visualforce Developer’s Guide’s excellent documentation on Remote Objects.

All code used in this article is available on GitHub..

 

3 thoughts on “Remote Objects Autocomplete

Leave a Reply

Your email address will not be published. Required fields are marked *