Плагин Typeahead не работает

Я пытался найти возможные проблемы, но я мог что-то упустить? Последний плагин typeahead.js 0.10.5.

Не могу понять, почему не работает typeahead. Спасибо.

введите здесь описание изображения

Вот код

<!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>

И, конечно же, BundleConfig с включенным 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;
        }
    }
}

asp.net-mvc twitter-bootstrap-3 bootstrap-typeahead
person monstro    schedule 08.10.2014    source источник
comment
Проверьте консоль в браузере и посмотрите, не появляется ли ошибка.   -  person beautifulcoder    schedule 08.10.2014
comment
Перемещено $(document).ready() вниз, так как MVC-связка не делает javascripts доступными до конца, но в консоли нет ошибок   -  person monstro    schedule 08.10.2014

Ответы (1)


arrow_upward
2
arrow_downward

Я никогда не использовал плагин лично, но, просматривая их документацию, я не нашел локальной опции для установки набора данных. Вот дополнительная информация о том, как установить набор данных для плагина.

Наборы данных Typeahead.js

Кроме того, вот их базовый пример настройки.

Следуя этим двум и используя опцию «источник» для набора данных для настройки вашего примера, я придумал это.

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

Вот ссылка на jsfiddle.

Дай мне знать, если это работает.

person Krishna Teja Veeramachaneni    schedule 08.10.2014
comment
Извините, что меня не было, это работает :) Спасибо. Я использовал старый подход. Теперь пытаемся решить здесь небольшую проблему: stackoverflow.com/ вопросы/26442052/ - person monstro; 18.10.2014