CODEWITHSUNDEEP
javascriptphphtml
Manas Paldhe
Manas Paldhe

Reputation: 776

Dropdown menu with keyboard input

I am learning how to make websites. In order to make a demo website, I tried to develop a form. In the form, user can type say some text. Expected behavior is that a dropdown menu listing some suggestions should show up.

I have a basic idea how this can be done. I can use html forms in conjunction with javascript and php (to get suggestions from database). But simple HTML forms just allow me to choose, not type. How to I mix keyboard input with dropdown menu? An example is google search's autocomplete. When I type "sho", I get suggestion in dropdown.

The HTML form that I am using is:

    <p id="table">
    <select name="formNamer">
      <option value="">Select...</option>
      <option value="M">Michael</option>
      <option value="F">Florence</option>
    </select>
    </p>

Upvotes: 1

Views: 2203

Answers (1)

Anshu Dwibhashi
Anshu Dwibhashi

Reputation: 4675

What you're looking for is called auto-complete. Many JavaScript Libraries like jQuery come with a built in autocomplete feature.

http://jqueryui.com/autocomplete/

Here's a demo fiddle.

Code:

Just replace the availableTags list with the list of elements that you want in the dropdown menu.

HTML

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

jQuery:

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

Upvotes: 1

Related Questions