JS Tutorial
- Overview
- Documents
jQuery autoComplete is an extremely lightweight completion suggester plugin for jQuery that Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. No dependencies except the jQuery library.
Features
- Lightweight: 3.4 kB of JavaScript - less than 1.4 kB gzipped
- Fully flexible data source
- Smart caching, delay and minimum character settings
- Callbacks
Source: goodies.pixabay.com
1. INCLUDE JS FILES
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="jquery.auto-complete.js"></script>
2. HTML
<input id="hero-demo" autofocus type="text" name="q" placeholder="Programming languages ..."/>
3. JAVASCRIPT
$(function(){
$('#hero-demo').autoComplete({
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
var suggestions = [];
for (i=0;i<choices.length;i++)
if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
suggest(suggestions);
}
});
});
4. OPTIONS
| Property | Default | Description |
|---|---|---|
| source(term, response) | null |
A callback function to connect any data source to autoComplete. The callback gets two arguments:
|
| minChars | 2 | Minimum number of characters (>=1) a user must type before a search is performed. |
| delay | 0 | The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay is more responsive, but can produce a lot of load. |
| cache | true | Determines if performed searches should be cached. |
| Callbacks | ||
| onSelect(term) | A callback function that fires when a suggestion is selected by mouse click. term is the selected value. Select on pressing Enter, Tab, and other control keys is passed untempered to the input field. | |
| Public Methods | ||
| destroy | Removes the autoComplete instance and its bindings. | |
5. AJAX REQUESTS
AJAX requests may come with very different requirements: JSON, JSONP, GET, POST, additionaly params, authentications, etc. In order to keep the source code small while retaining full flexibility, we decided to only use a simple callback function as the source for suggestions. Make your AJAX call inside this function and return matching suggestions with the response callback:
$('input[name="q"]').autoComplete({
source: function(term, response){
$.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
}
});
The AJAX call in this example needs to return an array of strings. The callback response must always be called, even if no suggestions are returned or if an error occured. This ensures the correct state of the autoComplete instance.
Optimizing AJAX requests
All search results are cached by default and unnecessary requests are prevented in order to keep server load as low as possible. To further reduce server impact, it's possible to abort unfinished AJAX requests before starting new ones:
$('input[name="q"]').autoComplete({
source: function(term, response){
try { xhr.abort(); } catch(e){}
var xhr = $.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
}
});
By typing along, the user may trigger one AJAX request after the other. With this little trick, we make sure that only the most current one actually gets executed - if not done so already.
