Question

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

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

我使用的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

您正在寻找的内容称为自动完成。像jQuery这样的许多JavaScript库都带有内置的自动完成功能。

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

带键盘输入的下拉菜单

1 个答案:

代码：