Question

196

Bootstrap typeahead not working in MVC 5

rated 0 times [ 197] [ 1] / answers: 1 / hits: 7106 / 10 Years ago, fri, may 30, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tammyb

Add To Favorites

Follow

Total Points: 278

Total Questions: 101

Total Answers: 103

Location: Botswana

Member since Sat, Jan 7, 2023

1 Year ago

tammyb questions

1 regex InputNumber formatter ant-design

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Redirect to a URL when browser back button is pressed using JavaScript

Mon, May 25, 20, 00:00, 4 Years ago

1 How can I redirect a URL for post request using AWS lambda?

Thu, Oct 3, 19, 00:00, 5 Years ago

1 useState and splice react

Wed, Sep 25, 19, 00:00, 5 Years ago

1 Using Template Literals with Lodash _.template()

Sun, Jun 9, 19, 00:00, 5 Years ago

View All

answered 10 Years ago brookelynshaem · Accepted Answer

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);

          });

      },

      ...        

  });



});