-
-Basic usage
-Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual <link rel="stylesheet" href="awesomplete.css" /> and <script src="awesomplete.js" async></script> tags.
-
-For the autocomplete, you just need an <input> text field (might work on <textarea> and elements with contentEditable, but that hasn’t been tested). Add class="awesomplete" for it to be automatically processed (you can still specify many options via HTML attributes), otherwise you can instantiate with a few lines of JS code, which allow for more customization.
-There are many ways to link an input to a list of suggestions. The simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load:
-
-<input class="awesomplete" list="mylist" />
-<datalist id="mylist">
- <option>Ada</option>
- <option>Java</option>
- <option>JavaScript</option>
- <option>Brainfuck</option>
- <option>LOLCODE</option>
- <option>Node.js</option>
- <option>Ruby on Rails</option>
-</datalist>
-
-// None!
-
-Or the following, if you don’t want to use a <datalist>, or if you don’t want to use IDs (since any selector will work in data-list):
-
-<input class="awesomplete" data-list="#mylist" />
-<ul id="mylist">
- <li>Ada</li>
- <li>Java</li>
- <li>JavaScript</li>
- <li>Brainfuck</li>
- <li>LOLCODE</li>
- <li>Node.js</li>
- <li>Ruby on Rails</li>
-</ul>
-
-// None!
-
-Or the following, if we want to instantiate in JS:
-
-<input id="myinput" />
-<ul id="mylist">
- <li>Ada</li>
- <li>Java</li>
- <li>JavaScript</li>
- <li>Brainfuck</li>
- <li>LOLCODE</li>
- <li>Node.js</li>
- <li>Ruby on Rails</li>
-</ul>
-var input = document.getElementById("myinput");
-new Awesomplete(input, {list: "#mylist"});
-
-We can use an element reference for the list instead of a selector:
-
-<input id="myinput" />
-<ul id="mylist">
- <li>Ada</li>
- <li>Java</li>
- <li>JavaScript</li>
- <li>Brainfuck</li>
- <li>LOLCODE</li>
- <li>Node.js</li>
- <li>Ruby on Rails</li>
-</ul>
-var input = document.getElementById("myinput");
-new Awesomplete(input, {list: document.querySelector("#mylist")});
-
-We can also directly use an array of strings:
-
-<input id="myinput" />
- var input = document.getElementById("myinput");
-new Awesomplete(input, {
- list: ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"]
-});
-
-We can even set it (or override it) later and it will just work:
-
-<input id="myinput" />
- var input = document.getElementById("myinput");
-var awesomplete = new Awesomplete(input);
-
-/* ...more code... */
-
-awesomplete.list = ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"];
-
-Suggestions with different label and value are supported too. The label will be shown in autocompleter and the value will be inserted into the input.
-
-<input id="myinput" />
- var input = document.getElementById("myinput");
-
-// Show label but insert value into the input:
-new Awesomplete(input, {
- list: [
- { label: "Belarus", value: "BY" },
- { label: "China", value: "CN" },
- { label: "United States", value: "US" }
- ]
-});
-
-// Same with arrays:
-new Awesomplete(input, {
- list: [
- [ "Belarus", "BY" ],
- [ "China", "CN" ],
- [ "United States", "US" ]
- ]
-});
-
-
-
-