Datalist (Autocomplete Search Suggestions)
Posted: Sun May 14, 2017 7:06 pm
Weave: https://mikethedj4.github.io/kodeWeave/ ... f82a6d804f
Today I'm going to show you all how easy it is to add autocomplete search suggestions like this...
![Image]()
First, start off with an input text box and give it a list attribute and name it "browsers" as we'll just show a list of some popular web browsers for the sake of this tutorial.
Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou
Today I'm going to show you all how easy it is to add autocomplete search suggestions like this...
First, start off with an input text box and give it a list attribute and name it "browsers" as we'll just show a list of some popular web browsers for the sake of this tutorial.
Code: Select all
Next, we just want to add a datalist element with the id of our list attribute...<input list="browsers">Code: Select all
Lastly, just like a select element, we want to add options in it which will be out search results and all we need inside those options are values of each browser the user can search for....<datalist id="browsers"></datalist>Code: Select all
Now if you want a more stylish and customizable autocomplete list. I recommend....<datalist id="browsers">
<option value="Internet Explorer" />
<option value="Edge" />
<option value="Chrome" />
<option value="Firefox" />
<option value="Safari" />
<option value="Opera" />
<option value="Slimjet" />
<option value="Maxthon" />
<option value="UC Browser" />
<option value="Netscape Browser" />
</datalist>Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou
Code: Select all
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer" />
<option value="Edge" />
<option value="Chrome" />
<option value="Firefox" />
<option value="Safari" />
<option value="Opera" />
<option value="Slimjet" />
<option value="Maxthon" />
<option value="UC Browser" />
<option value="Netscape Browser" />
</datalist>
<p></p>
<div>Internet Explorer</div>
<div>Edge</div>
<div>Chrome</div>
<div>Firefox</div>
<div>Safari</div>
<div>Opera</div>
<div>Slimjet</div>
<div>Maxthon</div>
<div>UC Browser</div>
<div>Netscape Browser</div>