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
Right Autocompleter has the following features:
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>
As all the other widgets out of the RightJS UI library the autocompleters have ability to be automatically discovered and initialized. For that purpose you might use a 'rel' attribute like this.
<input type="text" rel="autocompleter[/your/url/goes/here]" />
You also might define a local options list like this
<input type="text" rel="autocompleter['mommy','daddy','sonny']"/>
You also can use the HTML5 style attributes for options like this
<input type="text" rel="autocompleter[/url]"
data-autocompleter-options="{spinner: 'spinner'}"/>
Once the page is loaded the script will sniff through your page and initialize those inputs automatically.
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.
| Name | Default | Description |
|---|---|---|
| url | document.location | the url, might have a %{search} placeholder |
| param | ‘search’ | the requests parameter name |
| method | ‘get’ | the requests method |
| minLength | 1 | the minimal length when it starts work |
| threshold | 200 | the typing pause threshold |
| cache | true | a flag if it should use the results caching |
| local | null | an 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 |
| relName | ‘autocompleter’ | the auto-discovery feature key |
You can use the following event names to work with our autocompleters
| Name | Description |
|---|---|
| show | when the list of suggestions is shown |
| hide | when the list of suggestions is hidden |
| update | when the list of suggestions was updated |
| load | when the xhr request is loaded |
| select | when some option was selected |
| done | when the option was copied to the input element |
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 the 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 let you to drop the search results in static files on the server side.
If you need to alter some styles, here’s how the autocompleter HTML source looks like
<div class="autocompleter">
<ul>
<li>boo</li>
<li>boo</li>
<li>boo</li>
</ul>
</div>
<div class="autocompleter-spinner">
<div class="dot-1">»</div>
<div class="dot-2">»</div>
<div class="dot-3">»</div>
</div>