CODEWITHSUNDEEP
jsonasp.net-mvc-4twittertypeahead
Tondar
Tondar

Reputation: 33

Typeahead twitter bootstrap not functioning mvc4

I am trying to implement this code here

but I get no results while running the project.

here is my code:

View:

<input type="text" name="names" value="" id="typeahead" data-provide="typeahead"                autocomplete="off"  />

Again on view (index.cshtml):

<script type="text/javascript">
    $(function () {
        $('#typeahead').typeahead({
            source: function (term, process) {
                var url = '@Url.Content("~/index/GetNames")';

                return $.getJSON(url, { term: term }, function (data) {
                    return process(data);
                });
            }
        });
    })
</script>

Controller (indexController.cs):

[HttpGet]
public JsonResult GetNames(string term)
{
    // A list of names to mimic results from a database
    List<string> nameList = new List<string>
    {
        "Jonathan", "Lisa", "Jordan", "Tyler", "Susan", "Brandon", "Clayton", "Elizabeth", "Jennifer", "Hadi"
    };

    var results = nameList.Where(n =>
        n.StartsWith(term, StringComparison.OrdinalIgnoreCase));

    return new JsonResult()
    {
         Data = results.ToArray(),
         JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}

here are also the js scripts added at the end of the view page:

<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-1.9.1.intellisense.js"></script>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>

here is also the list of bugs I get on runtime:

Please let me know what am i doing wrong!

Upvotes: 0

Views: 2795

Answers (3)

O&#39;Mutt
O&#39;Mutt

Reputation: 1592

This may be a bit old but you cannot use source: you must use either remote:, prefetch:, or local: as the error reads.

Which version of bootstrap are you using? The standalone plug-in no longer supports all of the different data providers in the same way as the old one did

Upvotes: 2

Hieu Nguyen
Hieu Nguyen

Reputation: 8623

All the JS libraries you are using at the moment have one dependancy: jQuery so they need to be loaded in right order:

<!-- jQuery should always be the first -->
<!-- jquery-1.9.1.js and jquery-1.9.1.min.js are the same but .min version is minified and always lighter, so use it for faster page load -->
<script src="~/Scripts/jquery-1.9.1.min.js"></script>

<!-- Any other library should be loaded after jQuery -->
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.9.1.intellisense.js"></script>

Hope this helps ;)

Upvotes: 0

Ibraheem
Ibraheem

Reputation: 2358

First off, make sure you place the script tag referencing jquery first, before bootstrap. Also only load a single jquery script tag.

Like this:

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>

Upvotes: 0

Related Questions