如何在 html 中链接输入文本框和下拉菜单答案

【问题标题】：How can I link input textbox and dropdown in html如何在 html 中链接输入文本框和下拉菜单
【发布时间】：2015-12-23 03:07:37
【问题描述】：

我想使用 bootstarp 选择和输入文本框。当我在文本框中输入时，它应该建议引导选择元素的条目。我想使用 javascript、jQuery 和 json。我该怎么做？

【问题讨论】：

在 Stackoverflow 上发布任何问题之前，请访问 How to Ask 并研究 How to create a Minimal, Complete, and Verifiable example。
重复？见最佳答案。 stackoverflow.com/questions/12902010/…

标签： javascript jquery json

【解决方案1】：

我建议您为此目的使用一些插件。看看https://select2.github.io/examples.html

【讨论】：

【解决方案2】：

将以下几行添加到页面的头部并开始编码：

链接：

bootstrap.min.css, jquery.min.js, bootstrap.min.js

【讨论】：

maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

【解决方案3】：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script language="javascript">
    $(document).ready(function() {
      //Write your jquery code here  
    });
  </script>
</head>

<body>

  <div class="container">
    <h2>Form control: input</h2>
    <p>The form below contains two input elements; one of type text and one of type password:</p>
    <form role="form">
      <div class="form-group">
        <label for="usr">Name:</label>
        <input type="text" class="form-control" id="usr">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd">
      </div>

      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a>
          </li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a>
          </li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a>
          </li>
        </ul>
      </div>
    </form>
  </div>
</body>
</html>

【讨论】：