Using Twitter Typehead in ASP.NET MVC

Question

In Index.cshtml, I have below code:

@{
ViewBag.Title = "Home Page";

}

 <script type="text/javascript" src="http://twitter.github.io/typeahead.js/js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.js"></script>
 <script type="text/javascript" src="http://twitter.github.io/typeahead.js/js/hogan-2.0.0.js"></script>
 <script src="../../Content/twitter/typeahead.min.js" type="text/javascript"></script>

 <script type="text/javascript">
      $('input.countries').typeahead({
           name: 'countries',
           local: ["Unites States", "Mexico", "Canada", "Cuba", "Guatemala"]

      });
 </script>


   <input class="countries" type="text" placeholder="Countries">

But there is no autocomplete suggestions....I just following first 2 steps in below link to do my task...

http://www.arungudelli.com/jquery/simple-jquery-autocomplete-search-tutorial/

Is there any help?

Answer 1

It's a little hard to tell exactly what is happening with your setup, but you shouldn't need to include typeahead.min.js and typeahead.js. This jsfiddle simplifies what you have a little bit and works ok, so it should be a good place to start.

<script type="text/javascript" src="http://twitter.github.io/typeahead.js/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.js"></script>

<input class="countries" type="text" placeholder="Countries">

<script type="text/javascript">
     $('input.countries').typeahead({
         name: 'countries',
         local: ["Unites States", "Mexico", "Canada", "Cuba", "Guatemala"]
     });
</script>