Bootstrap typeahead not working in MVC 5

Question

in my mvc project iam trying to implement the autocomplete But it is not working (typehead) i done everything right but can't get it. below is my code . can any one help

<script type="text/javascript">
$(document).ready(function () {

    $("#Search").typeahead({
        source: function (query, process) {
            var countries = [];
            map = {};

            // This is going to make an HTTP post request to the controller
            return $.post('/Registration/GetPossibleLocations', { query: query }, function (data) {

                // Loop through and push to the array
                $.each(data, function (i, country) {
                    map[country.Name] = country;
                    countries.push(country.Name);
                });

                // Process the details
                process(countries);
            });
        },
        updater: function (item) {
            var selectedShortCode = map[item].ShortCode;

            // Set the text to our selected id
            $("#details").text("Selected : " + selectedShortCode);
            return item;
        }
    });

});

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript">     </script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js" type="text/javascript"></script>

<div>
    <input type="text" id="Search" data-provide="typeahead" placeholder="Country" autocomplete="off" />    
        </div>

Answer 1

The typeahead() waits at least two arguments. The first argument is an options array and then you can define multiple datasets. The source must be defined in a dataset.

See the usage at: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#usage

As the documentations says, the source has to compute the suggestion set (i.e. an array of JavaScript objects) for query. You are passing an array of strings. In addition to this, you have to set the displayKey too.

The source will be executed first time if you write something into the text field.

I've made a fiddle for you: http://jsfiddle.net/dtengeri/EhJvB/

Your code should look something like this:

<script type="text/javascript">
$(document).ready(function () {
  // Notice the first empty object. You can specify options in it.
  $("#Search").typeahead({}, {
      displayKey: 'Name',
      source: function (query, process) {
          var countries = [];
          map = {};

          // This is going to make an HTTP post request to the controller
          return $.post('/Registration/GetPossibleLocations', { query: query }, function (data) {

              // Loop through and push to the array
              $.each(data, function (i, country) {
                  map[country.Name] = country;
                  // You have to create an array of JS objects. 
                  // Typeahead will use the displayKey to fetch data from the object.
                  countries.push({'Name': country.Name});
              });

              // Process the details
              process(countries);
          });
      },
      ...        
  });

});

Answer 2

Try this

please remove autocomplete="off" from tag  


    <div>
    <input type="text" id="Search" data-provide="typeahead" placeholder="Country" />    
    </div>

Answer 3

I prefer to use the bloodhound integration for getting my data source. This is an example on how I am using it:

Bundles:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/layoutScriptsBundle").Include(
            "~/_js/_lib/jquery/jquery-{version}.js",
            "~/_js/_lib/bootstrap/bootstrap.js",
            "~/_js/_lib/typeahead.js/typeahead.bundle.js",
            "~/_js/_lib/handlebars.js/handlebars-v1.3.0.js"));

        bundles.Add(new StyleBundle("~/bundles/css/libs/layoutStylesBundle").Include(
            "~/_css/_lib/bootstrap/bootstrap.css",
            "~/_css/_lib/typeahead.js/typeahead.js-bootstrap.css"));
    }
}

JavaScript:

<script>
    window.siteNS = window.siteNS || {};
    jQuery(document).ready(function ($) {
        siteNS.typeaheadRemoteUrl = '@Url.ActionFor((ExampleController c) => c.GetTypeaheadData(null))?q=%QUERY';

        var myTypeaheadData = new Bloodhound({
            datumTokenizer: function (d) {
                return Bloodhound.tokenizers.whitespace(d.value);
            },
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: siteNS.typeaheadRemoteUrl,
                rateLimitWait: 250,
                ajax: { cache: false }
            }
        });

        myTypeaheadData.initialize();

        $('#myTypeahead').typeahead({
            autoselect: true,
            highlight: true,
            hint: true,
            minLength: 1
        }, {
            source: myTypeaheadData.ttAdapter(),
            name: 'myTypeaheadDatasetName',
            displayKey: 'ItemName',
            templates: {
                empty: '',
                footer: '',
                header: '',
                suggestion: Handlebars.compile('<p>{{ItemName}} - {{ItemID}}</p>')
            }
        });
    });
</script>

HTML:

<div class="form-group">
    <label class="control-label col-lg-4">Search/Autocomplete</label>
    <div class="col-lg-8 myTypeaheadContainer">
        <input id="myTypeahead" type="text" class="form-control">
        <span class="help-block">Using typeahead.js</span>
    </div>
</div>