问题描述:

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>

网友答案:

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
    });
  });
相关阅读:
Top