Hello all,

Bootstrap has lots of plugins that you can experiment with, and one of them is the Typeahead.js plugin similar to jQueryUI Autocomplete plugin. According to Bootstrap, Typeahead is an extendend plugin for quickly creating elegant typeaheads with any from text input. So given the description of the widget, I will provide a tutorial that integrates the plugin in an ASP.NET MVC project basing from this article Twitter Bootstrap Typeahead and ASP.NET MVC. The author from the source demonstrates preloaded country values but in my case, I modified it to handle searching through a database.

So to proceed with, just follow the steps below:

1. Create an ASP.NET MVC Project (VB).
2. Add an ADO.NET Entity model that connects to the AdventureWorks DB and it's CountryRegions table.
3. In your home controller, add the code that search countries based on a given value.
VB.NET Code:
  1. span style="color: #008080; font-style: italic;">' GET: /Home

4. In the head section of Index View, add reference to typeaheadjs.css and bootstrap3-typeahead.js files.

HTML Code:
  1. <link href="~/Content/typeaheadjs.css" rel="stylesheet" type="text/css" />
  2. <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
  3. <script src="~/Scripts/jquery-1.10.2.min.js"></script>
  4. <script src="~/Scripts/bootstrap.min.js"></script>
  5. <script src="~/Scripts/bootstrap3-typeahead.js"></script>

5. Add the script to utilize the typeahead.js plugin for searching data.

JavaScript Code:
  1. <script type="text/javascript""#Countries"// This is going to make an HTTP get request to the controller
  2. '/Home/GetCountries'// Loop through and push to the array
  3. // Process the details
  4. // Set the text to our selected id
  5.                 $("#details").text("Selected : "

6. In the body section, just add a div element and an input element that will trigger the typeahead event.

HTML Code:
  1. <div id="details" class="row"></div>
  2. <div class="row">
  3.     <input type="text" id="Countries" class="form-control" placeholder="Counry Name" />
  4. </div>

Name:  Typeahead Example.png
Views: 1034
Size:  11.6 KB

That's it.. :-)


Regards,

KGComputers