CODEWITHSUNDEEP
javascripthtmlautocomplete
el_coder
el_coder

Reputation: 65

My data-list search form is not working

I am trying to combine a data-list with actual links to make a auto-complete search form... Well here is my code:

<form action="#">
    <input list="results" type="text" placeholder="Search Me ;)">  
</form>
<datalist id="results" onchange="location = this.options[this.selectedIndex].value;">
    <option value="Home.html">Home</option>
    <option value="Contact.html">Contact</option>
    <option value="Sitemap.html">Sitemap</option>
</datalist>

However it does not work.. Any suggestions?

----NEW UPDATE----

Is it possible to assign the form onsubmit or action to the selected value in anyway?

Upvotes: 0

Views: 788

Answers (2)

Mark
Mark

Reputation: 3272

This will work however you don't use a datalist. Javascript:

function checkInput(searchQuery)
{
    if(searchQuery=="Home")
    {
        window.location = "Home.html";
    }
    else if(searchQuery == "Contact")
    {
        window.location = "Contact.html";
    }
    else if(searchQuery == "Sitemap")
    {
        window.location = "Sitemap.html";
    }
    else
    {
        document.getElementById("search").submit();
    }
}

In order to let this work your form should have an id of 'search'. Edit Your input a few changes:

<input type="text" placeholder="Search Me ;)" onkeydown="if (event.keyCode == 13) { checkInput(this.value); return false; }"/>

Upvotes: 2

andrew
andrew

Reputation: 9583

unfortunately you can't embed links into a datalist

eg 

      <option value="home"><a href="home.html">Home</a></option>

The dom simply doesn't work that way.

you would need to build the solution yourself using javascript.

I suggest taking a look at http://www.jqueryui.com they probably have something to help you

Upvotes: 0

Related Questions