-1

I want to use bootstarp select and an input textbox. When I type in textbox it should suggest entries of bootstrap select element. I want to use javascript, jQuery and json. How shall I do this?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
nishi
  • 11
  • 3
  • 1
    Please visit [**How to Ask**](http://stackoverflow.com/help/how-to-ask) and also study [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) before posting any question here on **Stackoverflow**. – vivekkupadhyay Sep 25 '15 at 10:03
  • 1
    duplicate? see top answer. http://stackoverflow.com/questions/12902010/twitter-bootstrap-autocomplete-dropdown-combobox-with-knockoutjs – BenG Sep 25 '15 at 10:05

3 Answers3

0

I would suggest you to use some plugin for the purpose. Have a look at https://select2.github.io/examples.html

krozaine
  • 1,481
  • 15
  • 22
0

Include following lines into your head section of page and start coding:

Links:

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

SVK
  • 2,107
  • 2
  • 20
  • 41
Pankaj Saboo
  • 1,125
  • 1
  • 8
  • 27
0

<!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>
Pankaj Saboo
  • 1,125
  • 1
  • 8
  • 27