Repository: Pixabay/jQuery-autoComplete
Branch: master
Commit: b9a703e62a7f
Files: 6
Total size: 31.3 KB
Directory structure:
gitextract_in5amcwq/
├── auto-complete.jquery.json
├── bower.json
├── demo.html
├── jquery.auto-complete.css
├── jquery.auto-complete.js
└── readme.md
================================================
FILE CONTENTS
================================================
================================================
FILE: auto-complete.jquery.json
================================================
{
"name": "auto-complete",
"title": "autoComplete",
"description": "An extremely lightweight completion suggester plugin for jQuery.",
"version": "1.0.7",
"dependencies": {
"jquery": ">=1.7"
},
"keywords": [
"autocomplete",
"suggest",
"autosuggest",
"suggester",
"jQuery"
],
"author": {
"name": "Simon Steinberger",
"url": "https://pixabay.com/users/Simon/",
"email": "simon@pixabay.com"
},
"licenses": [
{
"type": "MIT",
"url": "http://www.opensource.org/licenses/mit-license.php"
}
],
"homepage": "https://goodies.pixabay.com/jquery/auto-complete/demo.html",
"demo": "https://goodies.pixabay.com/jquery/auto-complete/demo.html"
}
================================================
FILE: bower.json
================================================
{
"name": "jquery-auto-complete",
"description": "A lightweight autocomplete plugin for jQuery.",
"version": "1.0.7",
"dependencies": {
"jquery": ">=1.7"
},
"homepage": "https://github.com/Pixabay/jQuery-autoComplete",
"authors": [{
"name": "Simon Steinberger",
"url": "https://pixabay.com/users/Simon/",
"email": "simon@pixabay.com"
}],
"keywords": [
"autocomplete",
"autosuggest",
"autosuggester",
"suggest",
"suggester",
"completer",
"select",
"dropdown",
"ajax"
],
"licenses": [{
"type": "MIT",
"url": "http://www.opensource.org/licenses/mit-license.php"
}],
"ignore": [
"bower.json",
"demo.html",
"auto-complete.jquery.json",
"readme.md"
]
}
================================================
FILE: demo.html
================================================
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery autoComplete Plugin</title>
<meta name="description" content="A lightweight autocomplete plugin for jQuery.">
<link rel="shortcut icon" href="https://pixabay.com/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300">
<link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/pure-min.css">
<style>
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
p, td { line-height: 1.5; }
ul { padding: 0 0 0 20px; }
th { background: #eee; white-space: nowrap; }
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }
h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
h2 { font-size: 2em; color: #636363; }
h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
a { color: #4e99c7; text-decoration: none; }
a:hover { text-decoration: underline; }
p, pre { margin: 0 0 1.2em; }
::selection { color: #fff; background: #328efd; }
::-moz-selection { color: #fff; background: #328efd; }
@media (max-width:480px) {
h1 { font-size: 3em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
td:first-child { white-space: normal; }
}
.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
pre i { color: #aaa; } /* comments */
pre b { font-weight: normal; color: #cf4b25; } /* strings */
pre em { color: #0c59e9; } /* numeric */
/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }
input[type="text"] { border-radius: 0 !important; }
</style>
<link rel="stylesheet" href="jquery.auto-complete.css">
</head>
<body>
<div style="max-width:900px;padding:0 10px;margin:40px auto;text-align:center">
<h1>autoComplete</h1>
<h2>An extremely lightweight completion suggester plugin for jQuery.</h2>
<a style="margin:5px 0" href="https://github.com/Pixabay/jQuery-autoComplete/archive/master.zip" class="pure-button pure-button-primary button-lg">Download</a>
<a style="margin:5px 0" href="https://github.com/Pixabay/jQuery-autoComplete" class="pure-button button-lg">View on GitHub</a>
</div>
<form onsubmit="$('#hero-demo').blur();return false;" class="pure-form" style="border-top: 1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;margin:30px 0;padding:20px 10px;text-align:center">
<input id="hero-demo" autofocus type="text" name="q" placeholder="Programming languages ..." style="width:100%;max-width:600px;outline:0">
</form>
<div style="max-width:900px;margin:auto;padding:0 10px 50px">
<h3>Overview and Features</h3>
<p>
Released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.
Source on <a href="https://github.com/Pixabay/jQuery-autoComplete">Github</a> (<a href="https://github.com/Pixabay/jQuery-autoComplete#changelog">changelog</a>).
Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. No dependencies except the jQuery library.
</p>
<ul>
<li>Lightweight: 3.4 kB of JavaScript - less than 1.4 kB gzipped</li>
<li>Fully flexible data source</li>
<li>Smart caching, delay and minimum character settings</li>
<li>Callbacks</li>
</ul>
<p>
This plugin was developed by and for <a href="https://pixabay.com/">Pixabay.com</a> - an international repository for free Public Domain images.
We have implemented this piece of software in production and we share it - in the spirit of Pixabay - freely with others.
</p>
<h3>Why another jQuery autocomplete plugin?</h3>
<p>
This plugin is largely based on DevBridge's wonderful <a href="https://github.com/devbridge/jQuery-Autocomplete">Ajax AutoComplete</a>.
We used this autocompleter for several weeks on Pixabay and it worked nicely.
However, we ended up hacking more and more into the original code - changing keyboard navigation and AJAX requests.
Finally, we decided to go for an own, ultra lightweight plugin code that is perfectly optimized for our needs. And here we are ...
</p>
<h3>Usage</h3>
<p>
Include the stylesheet <span class="inline-code">jquery.auto-complete.css</span> in the <span class="inline-code"><head></span> section of your page - and the JavaScript file <span class="inline-code">jquery.auto-complete.min.js</span> after loading the jQuery library.
autoComplete accepts settings from an object of key/value pairs, and can be assigned to any text input field.
</p>
<pre>
$(selector).autoComplete({key1: value1, key2: value2});
</pre>
<h3>Settings</h3>
<table>
<tr><th>Property</th><th>Default</th><th>Description</th></tr>
<tr><td>source(term, response)</td><td><i>null</i></td><td>
Required callback function to connect any data source to autoComplete. The callback gets two arguments:
<ul>
<li><span class="inline-code">term</span>, which refers to the value currently in the text input.</li>
<li>A <span class="inline-code">response</span> callback, which expects a single argument:
the data to suggest to the user. This data must be an array of filtered suggestions based on the provided term:
<br>['suggestion 1', 'suggestion 2', 'suggestion 3', ...]
</li>
</ul>
</td></tr>
<tr><td>minChars</td><td>3</td><td>Minimum number of characters (>=1) a user must type before a search is performed.</td></tr>
<tr><td>delay</td><td>150</td><td>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.</td></tr>
<tr><td>cache</td><td><i>true</i></td><td>Determines if performed searches should be cached.</td></tr>
<tr>
<td>menuClass</td><td><i>''</i></td>
<td>Custom class/es that get/s added to the dropdown menu container.
<br>Example: <span class="inline-code">{ menuClass: 'class1 class2' }</span></td>
</tr>
<tr>
<td>renderItem</td><td><i>function</i></td>
<td>
<p>A function that gives you control over how suggestions are displayed. Default:</p>
<pre>
function (item, search){
search = search.replace(<b>/[-\/\\^$*+?.()|[\]{}]/</b>g, <b>'\\$&'</b>);
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
return '<div class="autocomplete-suggestion" data-val="' + item + '">'\
+ item.replace(re, "<b>$1</b>") + '</div>';
}
</pre>
</td>
</tr>
<tr><td colspan="3"> </td></tr>
<tr><th>Callbacks</th><th colspan="2"></th></tr>
<tr><td>onSelect(event, term, item)</td><td colspan="2">
A callback function that fires when a suggestion is selected by mouse click, enter, or tab.
<span class="inline-code">event</span> is the event that triggered the callback,
<span class="inline-code">term</span> is the selected value.
and <span class="inline-code">item</span> is the item rendered by the renderItem function.
</td></tr>
<tr><td colspan="3"> </td></tr>
<tr><th>Public Methods</th><th colspan="2"></th></tr>
<tr><td>destroy</td><td colspan="2">Removes the autoComplete instance and its bindings.</td></tr>
</table>
<h3 style="margin-top:.8em;border-top:1px solid #eee;padding-top:1.8em">Demos</h3>
<h4 style="margin-top:.5em">Searching in local data</h4>
<p>
This plugin was designed mainly with AJAX requests in mind, but it may be used with local data, as well.
Connecting the autocompletion suggester to an array of strings can be done in the source function like so:
</p>
<pre>
$(<b>'input[name="q"]'</b>).autoComplete({
minChars: 2,
source: function(term, suggest){
term = term.toLowerCase();
var choices = [<b>'ActionScript'</b>, <b>'AppleScript'</b>, <b>'Asp'</b>, <i>...</i>];
var matches = [];
for (i=0; i<choices.length; i++)
if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
suggest(matches);
}
});</pre>
<p>
The source function iterates through an array of (local) choices and we return a new array containing all (lowercased) matches.
Simple as that.
</p>
<h4>AJAX requests</h4>
<p>
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:
</p>
<pre>
$(<b>'input[name="q"]'</b>).autoComplete({
source: function(term, response){
$.getJSON(<b>'/some/ajax/url/'</b>, { q: term }, function(data){ response(data); });
}
});</pre>
<p>
The AJAX call in this example needs to return an array of strings.
The callback <span class="inline-code">response</span> must always be called, even if no suggestions are returned or if an error occured.
This ensures the correct state of the autoComplete instance.
</p>
<h4>Optimizing AJAX requests</h4>
<p>
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:
</p>
<pre>
var xhr;
$(<b>'input[name="q"]'</b>).autoComplete({
source: function(term, response){
try { xhr.abort(); } catch(e){}
xhr = $.getJSON(<b>'/some/ajax/url/'</b>, { q: term }, function(data){ response(data); });
}
});</pre>
<p>
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.
</p>
<h4>Advanced suggestions handling and custom layout</h4>
<p>
By making use of the <span class="inline-code">renderItem()</span> function, it's possible to turn the autocompleter into an item suggester:
</p>
<form onsubmit="$('#advanced-demo').blur();return false;" class="pure-form" style="margin:30px 0 40px">
<input id="advanced-demo" autofocus type="text" name="q" placeholder="Country or language code ..." style="width:100%;max-width:600px;outline:0">
</form>
<p>
While typing country names or language codes, a list of matching suggestions is displayed. E.g. typing "de" will show "Germany" as a suggestion, because "de" is the language code for German.
Source code for this example:
</p>
<pre>
$(<b>'input[name="q"]'</b>).autoComplete({
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
var choices = [[<b>'Australia'</b>, <b>'au'</b>], [<b>'Austria'</b>, <b>'at'</b>], [<b>'Brasil'</b>, <b>'br'</b>], ...];
var suggestions = [];
for (i=0;i<choices.length;i++)
if (~(choices[i][0]+<b>' '</b>+choices[i][1]).toLowerCase().indexOf(term)) suggestions.push(choices[i]);
suggest(suggestions);
},
renderItem: function (item, search){
search = search.replace(<b>/[-\/\\^$*+?.()|[\]{}]/</b>g, <b>'\\$&'</b>);
var re = new RegExp(<b>"("</b> + search.split(<b>' '</b>).join(<b>'|'</b>) + <b>")"</b>, <b>"gi"</b>);
return <b>'<div class="autocomplete-suggestion" data-langname="'</b>+item[0]+<b>'" data-lang="'</b>+item[1]+<b>'" data-val="'</b>+search+<b>'"><img src="img/'</b>+item[1]+<b>'.png"> '</b>+item[0].replace(re, <b>"<b>$1</b>"</b>)+<b>'</div>'</b>;
},
onSelect: function(e, term, item){
alert(<b>'Item "'</b>+item.data(<b>'langname'</b>)+<b>' ('</b>+item.data(<b>'lang'</b>)+<b>')" selected by '</b>+(e.type == <b>'keydown'</b> ? <b>'pressing enter'</b> : <b>'mouse click'</b>)+<b>'.'</b>);
}
});</pre>
<p>
In this case, autocompleting the text field is not desired, so we turn it off by setting <span class="inline-code">data-val="'+search+'"</span> in the <span class="inline-code">renderItem()</span> function.
However, when choosing an item, the <span class="inline-code">onSelect()</span> callback returns all required information.
</p>
<div style="margin:60px 0 40px;overflow:hidden;border-top:1px solid #eee;padding-top:40px">
<span id="github_social"></span>
<div style="float:left;margin-right:35px">
<a href="#" data-width="70" class="twitter-share-button" data-text="jQuery autoComplete Plugin"></a>
</div>
<div style="float:left">
<div class="g-plusone" data-size="medium"></div>
</div>
<div style="float:left;width:140px" class="fb-like" data-send="false" data-layout="button_count" data-width="140" data-show-faces="false"></div>
</div>
<p>Please report any bugs and issues at the <a href="https://github.com/Pixabay/jQuery-autoComplete">GitHub repositiory</a>.</p>
<p>This software is released as Open Source under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> by <a href="https://pixabay.com/users/Simon/">Simon Steinberger / Pixabay.com</a>.</p>
</div>
<div style="background:#fafafa;border-top:1px solid #eee;padding:15px;font-size:.9em">
<div style="max-width:900px;margin:auto;padding:0 10px">
<a style="float:right;margin-left:20px" href="https://pixabay.com/en/service/about/">About Us</a>
<a style="float:right;margin-left:20px" href="https://pixabay.com/en/blog/">Blog</a>
<a style="float:right;margin-left:20px" href="https://goodies.pixabay.com/">More Goodies</a>
© <a href="https://pixabay.com/">Pixabay.com</a> / Simon Steinberger / Hans Braxmeier
</div>
</div>
<div id="fb-root"></div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.auto-complete.js"></script>
<script>
$(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);
}
});
$('#advanced-demo').autoComplete({
minChars: 0,
source: function(term, suggest){
term = term.toLowerCase();
var choices = [['Australia', 'au'], ['Austria', 'at'], ['Brasil', 'br'], ['Bulgaria', 'bg'], ['Canada', 'ca'], ['China', 'cn'], ['Czech Republic', 'cz'], ['Denmark', 'dk'], ['Finland', 'fi'], ['France', 'fr'], ['Germany', 'de'], ['Hungary', 'hu'], ['India', 'in'], ['Italy', 'it'], ['Japan', 'ja'], ['Netherlands', 'nl'], ['Norway', 'no'], ['Portugal', 'pt'], ['Romania', 'ro'], ['Russia', 'ru'], ['Spain', 'es'], ['Swiss', 'ch'], ['Turkey', 'tr'], ['USA', 'us']];
var suggestions = [];
for (i=0;i<choices.length;i++)
if (~(choices[i][0]+' '+choices[i][1]).toLowerCase().indexOf(term)) suggestions.push(choices[i]);
suggest(suggestions);
},
renderItem: function (item, search){
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
return '<div class="autocomplete-suggestion" data-langname="'+item[0]+'" data-lang="'+item[1]+'" data-val="'+search+'"><img src="img/'+item[1]+'.png"> '+item[0].replace(re, "<b>$1</b>")+'</div>';
},
onSelect: function(e, term, item){
console.log('Item "'+item.data('langname')+' ('+item.data('lang')+')" selected by '+(e.type == 'keydown' ? 'pressing enter or tab' : 'mouse click')+'.');
$('#advanced-demo').val(item.data('langname')+' ('+item.data('lang')+')');
}
});
});
if (~window.location.href.indexOf('http')) {
(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=114593902037957";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
$('#github_social').html('\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=jQuery-autoComplete&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=jQuery-autoComplete&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
');
}
</script>
</body>
</html>
================================================
FILE: jquery.auto-complete.css
================================================
.autocomplete-suggestions {
text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
/* core styles should not be changed */
position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
}
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected { background: #f0f0f0; }
================================================
FILE: jquery.auto-complete.js
================================================
/*
jQuery autoComplete v1.0.7
Copyright (c) 2014 Simon Steinberger / Pixabay
GitHub: https://github.com/Pixabay/jQuery-autoComplete
License: http://www.opensource.org/licenses/mit-license.php
*/
(function($){
$.fn.autoComplete = function(options){
var o = $.extend({}, $.fn.autoComplete.defaults, options);
// public methods
if (typeof options == 'string') {
this.each(function(){
var that = $(this);
if (options == 'destroy') {
$(window).off('resize.autocomplete', that.updateSC);
that.off('blur.autocomplete focus.autocomplete keydown.autocomplete keyup.autocomplete');
if (that.data('autocomplete'))
that.attr('autocomplete', that.data('autocomplete'));
else
that.removeAttr('autocomplete');
$(that.data('sc')).remove();
that.removeData('sc').removeData('autocomplete');
}
});
return this;
}
return this.each(function(){
var that = $(this);
// sc = 'suggestions container'
that.sc = $('<div class="autocomplete-suggestions '+o.menuClass+'"></div>');
that.data('sc', that.sc).data('autocomplete', that.attr('autocomplete'));
that.attr('autocomplete', 'off');
that.cache = {};
that.last_val = '';
that.updateSC = function(resize, next){
that.sc.css({
top: that.offset().top + that.outerHeight(),
left: that.offset().left,
width: that.outerWidth()
});
if (!resize) {
that.sc.show();
if (!that.sc.maxHeight) that.sc.maxHeight = parseInt(that.sc.css('max-height'));
if (!that.sc.suggestionHeight) that.sc.suggestionHeight = $('.autocomplete-suggestion', that.sc).first().outerHeight();
if (that.sc.suggestionHeight)
if (!next) that.sc.scrollTop(0);
else {
var scrTop = that.sc.scrollTop(), selTop = next.offset().top - that.sc.offset().top;
if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0)
that.sc.scrollTop(selTop + that.sc.suggestionHeight + scrTop - that.sc.maxHeight);
else if (selTop < 0)
that.sc.scrollTop(selTop + scrTop);
}
}
}
$(window).on('resize.autocomplete', that.updateSC);
that.sc.appendTo('body');
that.sc.on('mouseleave', '.autocomplete-suggestion', function (){
$('.autocomplete-suggestion.selected').removeClass('selected');
});
that.sc.on('mouseenter', '.autocomplete-suggestion', function (){
$('.autocomplete-suggestion.selected').removeClass('selected');
$(this).addClass('selected');
});
that.sc.on('mousedown click', '.autocomplete-suggestion', function (e){
var item = $(this), v = item.data('val');
if (v || item.hasClass('autocomplete-suggestion')) { // else outside click
that.val(v);
o.onSelect(e, v, item);
that.sc.hide();
}
return false;
});
that.on('blur.autocomplete', function(){
try { over_sb = $('.autocomplete-suggestions:hover').length; } catch(e){ over_sb = 0; } // IE7 fix :hover
if (!over_sb) {
that.last_val = that.val();
that.sc.hide();
setTimeout(function(){ that.sc.hide(); }, 350); // hide suggestions on fast input
} else if (!that.is(':focus')) setTimeout(function(){ that.focus(); }, 20);
});
if (!o.minChars) that.on('focus.autocomplete', function(){ that.last_val = '\n'; that.trigger('keyup.autocomplete'); });
function suggest(data){
var val = that.val();
that.cache[val] = data;
if (data.length && val.length >= o.minChars) {
var s = '';
for (var i=0;i<data.length;i++) s += o.renderItem(data[i], val);
that.sc.html(s);
that.updateSC(0);
}
else
that.sc.hide();
}
that.on('keydown.autocomplete', function(e){
// down (40), up (38)
if ((e.which == 40 || e.which == 38) && that.sc.html()) {
var next, sel = $('.autocomplete-suggestion.selected', that.sc);
if (!sel.length) {
next = (e.which == 40) ? $('.autocomplete-suggestion', that.sc).first() : $('.autocomplete-suggestion', that.sc).last();
that.val(next.addClass('selected').data('val'));
} else {
next = (e.which == 40) ? sel.next('.autocomplete-suggestion') : sel.prev('.autocomplete-suggestion');
if (next.length) { sel.removeClass('selected'); that.val(next.addClass('selected').data('val')); }
else { sel.removeClass('selected'); that.val(that.last_val); next = 0; }
}
that.updateSC(0, next);
return false;
}
// esc
else if (e.which == 27) that.val(that.last_val).sc.hide();
// enter or tab
else if (e.which == 13 || e.which == 9) {
var sel = $('.autocomplete-suggestion.selected', that.sc);
if (sel.length && that.sc.is(':visible')) { o.onSelect(e, sel.data('val'), sel); setTimeout(function(){ that.sc.hide(); }, 20); }
}
});
that.on('keyup.autocomplete', function(e){
if (!~$.inArray(e.which, [13, 27, 35, 36, 37, 38, 39, 40])) {
var val = that.val();
if (val.length >= o.minChars) {
if (val != that.last_val) {
that.last_val = val;
clearTimeout(that.timer);
if (o.cache) {
if (val in that.cache) { suggest(that.cache[val]); return; }
// no requests if previous suggestions were empty
for (var i=1; i<val.length-o.minChars; i++) {
var part = val.slice(0, val.length-i);
if (part in that.cache && !that.cache[part].length) { suggest([]); return; }
}
}
that.timer = setTimeout(function(){ o.source(val, suggest) }, o.delay);
}
} else {
that.last_val = val;
that.sc.hide();
}
}
});
});
}
$.fn.autoComplete.defaults = {
source: 0,
minChars: 3,
delay: 150,
cache: 1,
menuClass: '',
renderItem: function (item, search){
// escape special characters
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
},
onSelect: function(e, term, item){}
};
}(jQuery));
================================================
FILE: readme.md
================================================
jQuery-autoComplete
===================
An extremely lightweight completion suggester plugin for jQuery.
Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. No dependencies except the jQuery library.
Released under the MIT License: http://www.opensource.org/licenses/mit-license.php
This plugin was developed by and for [Pixabay.com](https://pixabay.com/) - an international repository for sharing free public domain images.
We have implemented this plugin in production and we share this piece of software - in the spirit of Pixabay - freely with others.
## Demo and Documentation
https://goodies.pixabay.com/jquery/auto-complete/demo.html
## 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
## Changelog
### Version 1.0.7 - 2015/08/15
* Fixed #29: Select item with tab.
* Fixed #33: Suggestions not hidden on fast input.
* Fixed incorrect selection by mouse when suggestions are scrolled down.
### Version 1.0.6 - 2015/04/22
* Fixed #7: Firing onSelect callback on enter and passing event and selected suggestion item as additional arguments.
### Version 1.0.5 - 2014/11/26
* Fixed #4: renderItem bugfix
### Version 1.0.4 - 2014/11/26
* Added renderItem function options allowing custom data passing and autoComplete rendering (https://github.com/Pixabay/jQuery-autoComplete/pull/3).
* Improved auto positioning.
### Version 1.0.3 - 2014/11/17
* Added menuClass option for custom styling multiple autoComplete dropdowns on one page.
* Fixed destroy method.
### Version 1.0.2 - 2014/09/13
* Another fix of the auto-positioning method on init.
### Version 1.0.1 - 2014/08/10
* Fixed auto positioning of suggestions container on init.
### Version 1.0.0-beta - 2014/07/15
* First release
gitextract_in5amcwq/ ├── auto-complete.jquery.json ├── bower.json ├── demo.html ├── jquery.auto-complete.css ├── jquery.auto-complete.js └── readme.md
SYMBOL INDEX (1 symbols across 1 files)
FILE: jquery.auto-complete.js
function suggest (line 94) | function suggest(data){
Condensed preview — 6 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (33K chars).
[
{
"path": "auto-complete.jquery.json",
"chars": 673,
"preview": "{\n\t\"name\": \"auto-complete\",\n\t\"title\": \"autoComplete\",\n\t\"description\": \"An extremely lightweight completion suggester plu"
},
{
"path": "bower.json",
"chars": 852,
"preview": "{\n \"name\": \"jquery-auto-complete\",\n\t\"description\": \"A lightweight autocomplete plugin for jQuery.\",\n \"version\": \"1"
},
{
"path": "demo.html",
"chars": 20031,
"preview": "<!DOCTYPE html><html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>jQuery autoComplete Plugin</title>\n <met"
},
{
"path": "jquery.auto-complete.css",
"chars": 653,
"preview": ".autocomplete-suggestions {\n text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #f"
},
{
"path": "jquery.auto-complete.js",
"chars": 7971,
"preview": "/*\n\tjQuery autoComplete v1.0.7\n Copyright (c) 2014 Simon Steinberger / Pixabay\n GitHub: https://github.com/Pixabay"
},
{
"path": "readme.md",
"chars": 1863,
"preview": "jQuery-autoComplete\n===================\n\nAn extremely lightweight completion suggester plugin for jQuery.\n\nCompatible wi"
}
]
About this extraction
This page contains the full source code of the Pixabay/jQuery-autoComplete GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 6 files (31.3 KB), approximately 8.3k tokens, and a symbol index with 1 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.