CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrap-3bootstrap-typeahead
Slava
Slava

Reputation: 6650

Typeahead plugin is not working

I tried to find the possible problems but I could be missing something? Latest typeahead.js 0.10.5 plugin.

Can't understand why typeahead is not working. Thank you.

enter image description here

Here is the code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link href="~/Content/images/home.png" type="image/png" rel="icon" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" rel="home" href="#" title="Home">Home</a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <div class="col-sm-6 col-md-6">
                    <form class="navbar-form" role="search" method="get" id="search-form" name="search-form">
                        <div class="btn-group pull-left">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control typeahead" autocomplete="off" placeholder="Search..." id="query" name="query">
                            <div class="input-group-btn">
                                <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <script type="text/javascript">

        $(document).ready(function () {
            $('input.typeahead').typeahead({
                name: 'States',
                local: ["Alabama", "Alaska", "West Virginia", "Wisconsin", "Wyoming"]
            });
        });

    </script>
</body>
</html>

And of course the BundleConfig with included typeahead.bundle.min.js:

using System.Web;
using System.Web.Optimization;

namespace Homepage2
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js",
                      "~/Scripts/typeahead.bundle.min.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

            // Set EnableOptimizations to false for debugging. For more information,
            // visit http://go.microsoft.com/fwlink/?LinkId=301862
            BundleTable.EnableOptimizations = true;
        }
    }
}

Upvotes: 1

Views: 1632

Answers (1)

Krishna Veeramachaneni
Krishna Veeramachaneni

Reputation: 2141

I never used the plugin personally but looking through their documentation, I did not find the local option to set the dataset. Here is more information regarding how to set the dataset to the plugin.

Typeahead.js Datasets

Also, here is their basic setup example.

Following those two and using the "source" option for dataset to setup your example, I came up with this.

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substrRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.push({ value: str });
      }
    });

    cb(matches);
  };
};

var states = ["Alabama", "Alaska", "West Virginia", "Wisconsin", "Wyoming"];


$('input.typeahead').typeahead({  
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  displayKey: 'value',
  source: substringMatcher(states)
});

Here is the jsfiddle link.

Let me know if that works.

Upvotes: 2

Related Questions