• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

Datalist (Autocomplete Search Suggestions)

User avatar
mikethedj4
VIP - Site Partner
Posts: 2576

Datalist (Autocomplete Search Suggestions)

Sun May 14, 2017 8: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.

Code: Select all

<input list="browsers">
Next, we just want to add a datalist element with the id of our list attribute...

Code: Select all

<datalist id="browsers"></datalist>
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....

Code: Select all

<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>
Now if you want a more stylish and customizable autocomplete list. I recommend....

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>
Image
Image

User avatar
CodenStuff
Site Admin
Posts: 4361

Re: Datalist (Autocomplete Search Suggestions)

Mon May 15, 2017 5:42 pm

I like little code bits like this. They always add to your knowledge of web building :)
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.

Post Reply

Return to “Tutorials”