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

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

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

enter image description here

Вот код

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

источник

2014-10-08 monstro

Проверьте консоль в браузере и убедитесь, что вы получаете сообщение об ошибке – beautifulcoder

Перемещено $ (document) .ready() в нижней части, так как слияние MVC не делает javascripts доступным до конца, но ошибок в консоли – monstro

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

Typeahead.js Datasets

Also, here is their basic setup example.

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

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.

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

источник

2014-10-08 19:56:07

Извините, меня не было, это работает :) Спасибо. Я использовал старый подход. Теперь, пытаясь решить некоторые незначительные проблемы здесь: http://stackoverflow.com/questions/26442052/typeahead-shows-results-as-undefined – monstro

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

ответ

Смежные вопросы