Right Autocompleter

Right Autocompleter is the official autocompletion feature for RightJS

Get the latest version right here

All the source code of the project is available under terms of the MIT license

http://github.com/rightjs/rightjs-ui/tree/master/src/autocompleter/

For some standard usage examples see the demo page

Index

top ↑Features List

Right Autocompleter has the following features:

  • Works with ajax requests or a local options list
  • Supports RESTful design and server side caching friendly urls
  • Have responses caching
  • Comes in a single tiny file (less than 3k gzipped)
  • No css or image dependencies
  • Has basic styles out of the box
  • Has a basic textual spinner by default
  • Has autocompletion fields auto-initialization feature

top ↑Usage Basics

Basically there’s no pubic API, so you just feed the constructor with a reference to your input element and specify some options

// <input type="text" id="my-input" />

// a remote list calling
new Autocompleter('my-input', {
url: '/my/things'
});

// a local options list
new Autocompleter('my-input', {
local: $w('mommy daddy sonny doggy kitty')
});

Autocompleter expects your server send back usual list of UL/LI tags, with any content inside of the items

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

top ↑Auto-Initialization Feature

As all the other widgets out of the RightJS UI library the autocompleters have ability to be automatically initialized by using the standard data-autocompleter HTML5 field, like that:

<input type="text" data-autocompleter="{url:'/your/url'}" />

<input type="text" data-autocompleter="{local:['mommy','daddy','sonny']}" />

Once you’ve done that, when the user will starts to interact with the field it will be automatically initialized with options specified in the attribute.

top ↑Options List

There is a simple list of options for the autocompleters. You might specify any of them as the constructor options or alter the settings globally by changing the Autocompleter.Options object.

NameDefaultDescription
urldocument.locationthe url, might have a %{search} placeholder
param‘search’the requests parameter name
method‘get’the requests method
minLength1the minimal length when it starts work
threshold200the typing pause threshold
cachetruea flag if it should use the results caching
localnullan optional local search results list
fxName‘slide’visual effects name, use ‘null’ to disable fx
fxDuration‘short’the visual effect duration
spinner‘native’spinner element reference
cssRule‘input[data-autocompleter]’the auto-initializable autocompleters css-rule

top ↑Events List

You can use the following event names to work with our autocompleters

NameDescription
showwhen the list of suggestions is shown
hidewhen the list of suggestions is hidden
updatewhen the list of suggestions was updated
loadwhen the xhr request is loaded
selectwhen some option was selected
donewhen the option was copied to the input element

top ↑Urls Usage

Right autocompleter provides two options to work with the target urls, you might specify the 'param' and 'url' options as the default and usual approach.

new Autocompleter('my-input', {
url: '/my/url',
param: 'search'
});

/*
In this case the autocompleter will hit urls like this.

/my/url?search=a
/my/url?search=as
/my/url?search=asd
/my/url?search=asdf

*/

You also might want to have more caching friendly urls without any parameters, in this case you might use the '%{search}' placeholder in your url. Like this

new Autocompleter('my-input', {
url: '/my/url/%{search}.js'
});

/*
In this case the autocompleter will hit urls like this

/my/url/a.js
/my/url/as.js
/my/url/asd.js
/my/url/asdf.js

*/

This will allow you to drop the search results in static files on the server side.

top ↑Style Alterations

If you need to alter some styles, here’s how the autocompleter HTML source looks like

<ul class="rui-autocompleter rui-dd-menu">
<li>boo</li>
<li>boo</li>
<li>boo</li>
</ul>

<div class="rui-autocompleter-spinner rui-spinner">
<div class="glow"></div><div></div>....
</div>