.. Bootstrap Autocomplete documentation master file, created by
sphinx-quickstart on Wed Nov 16 18:27:52 2016.
You can adapt this file completely to your liking, but it should at least
contain the root `toctree` directive.
.. default-domain:: js
Boostrap Autocomplete Documentation
===================================
Version: |release|
Features
--------
* **Fast.**
* **Easy.** No complex configuration. HTML attributes supported.
* **Modals supported.** No problems in modals.
* **Customizable.** You can customize every single step in the suggesting workflow.
* **Batteries included.** It works out of the box for Bootstrap v3 and v4.
* **i18n.** Use ``data-*`` attributes to specify the strings to use in case of errors/noresults.
* **Styles.** No custom styles. Uses standard Bootstrap's dropdown.
Getting Started
---------------
Bootstrap Autocomplete works as a plugin. Add it to your page
.. code-block:: html
Using CDN (thanks to RawGit | GitCDN)
.. code-block:: html
:caption: STABLE version |release|
.. code-block:: html
:caption: Latest version (this is the development branch)
That's it! Go on to enhance your text fields! :)
Basic usage
-----------
Text Autocomplete
*****************
Autocomplete is not enabled by default. You must activate it on the fields you want to enhance.
Of course you can also use a wide selector to enable it on specific classes or tags.
Suppose you have a field as follows
.. code-block:: html
Here the class ``basicAutoComplete`` is used to identify all the fields on which to activate a basic autocomplete.
Then in Javascript we activate it:
.. code-block:: javascript
$('.basicAutoComplete').autoComplete({
resolverSettings: {
url: 'testdata/test-list.json'
}
});
In this example we specified the ``url`` to use. Autocomplete will automatically make an Ajax GET request to that URL
using an argument named ``q`` with the text typed by the user. Rate limits are enforced and minimun field length is 2.
Even simpler you can pass the URL directly in the markup
.. code-block:: html
and enhance it just with
.. code-block:: javascript
$('.basicAutoComplete').autoComplete();
Response Format
***************
We know how to start an autocomplete lookup but what about the results?
The *default* configuration expects a simple list in JSON format. Like
.. code-block:: json
[
"Google Cloud Platform",
"Amazon AWS",
"Docker",
"Digital Ocean"
]
Select Autocomplete
*******************
One of the main features of Bootstrap Autocomplete is to enhance ``