Flexcomplete
A flexible autocomplete plugin for jQuery. It works with online and offline data.
Getting Started
Download the production version or the development version.
In your web page:
API
search - search for a query searchQuery
and shows the results
;
close - close the results box
;
select - select the resulted by index
;
extend|options - config the Flexcomplete default options
// sets the default delay to 500msvar settings = delay: 500;;// or;
destroy|unload - destroys the Flexcomplete instance
;// or;
staticData - set the static data dynamically
var data = 'foo' 'bar' 'baz';;
To change flexcomplete behaviour globally you must override the $.flexcomplete.options
object. See below the option keys, their default values and their description.
// the parameter key with your search queryqueryVar: "q" // Http methodmethod: "GET" // executed before flexcomplete sends your data to server, so you can process the input and change it anyway { return value;} // executed when the user selects an item from the list { inputvalue = value;} // if you want to process the input's value when the autoreplacing options is enabled override this function { return value;} // if you want to process the value that comes from the server to fulfill the items override this function { return value;} // if you want to filter your data when staticDataSearch is enabled override this function { return arr; // you can filter arr here (check examples how to do it)} // delay between typing and sending the request to the serverdelay: 100 // how many items are skipped on triggering an `page up` or `page down` when navigating the listjump: 6 // how many chars are needed before send the first request to the serverstartIn: 1 // select the result if there is only one item in the listselectIfOneResult: false // any extra parameters you want to send to the server// can be an object or a function that returns an objectparams: {} | { return {};} // any headers you want to send to the server// can be an object or a function that returns an objectheaders: {} | { return {};} // enable this option if you want to replace the input content when navigating through list itemsautoReplacing: false
Examples
To see more examples of how to use Flexcomplete please check the demo directory.
Building
Developers can easily build Flexcomplete using NPM.
NPM
For the developers interested in building Flexcomplete:
npm install
Bower
For developers not interested in building the Flexcomplete library... use bower to install and use the Flexcomplete distribution files.
Change to your project's root directory.
# To get the latest stable version, use Bower from the command line.
bower install flexcomplete
CDN
CDN versions of Flexcomplete are available at:
With the GitCDN.xyz CDN, you will not need to download local copies of the distribution files. Instead simply reference the CDN urls to easily use those remote library files. This is especially useful when using online tools such as CodePen, Plunkr, or JSFiddle.
<!-- Flexcomplete available via GitCDN.xyz --> <!-- Flexcomplete minified version available via GitCDN.xyz -->
Release History
- 1.0.0 release
- 0.4.0 beta release
- 0.1.0 first release