javascript - 带键盘输入的下拉菜单

Question

我正在学习如何制作网站。为了制作一个演示网站，我尝试开发一个表单。在表单中，用户可以输入一些文本。预期的行为是应该显示一个列出一些建议的下拉菜单。

我对如何做到这一点有一个基本的想法。我可以将 html 表单与 javascript 和 php 结合使用(从数据库获取建议)。但简单的 HTML 表单只能让我选择，不能打字。如何将键盘输入与下拉菜单混合？一个例子是谷歌搜索的自动完成。当我输入“sho”时，我会在下拉列表中收到建议。

我使用的 HTML 表单是:

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

Answer 1

您正在寻找的内容称为自动完成。许多 JavaScript 库(例如 jQuery)都带有内置的自动完成功能。

http://jqueryui.com/autocomplete/

Here's a demo fiddle.

代码:

只需将 availableTags 列表替换为您想要在下拉菜单中出现的元素列表即可。

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
    });
  });