Typeahead插件不工作

我试图找到可能的问题，但我可能会错过什么？最新typeahead.js 0.10.5插件。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 2014-10-08 17:15:19

感动$（文件）。就绪（）的底部，因为MVC捆绑犯规年底前使现有的JavaScript，但在控制台 – monstro 2014-10-08 17:37:04

我从来没有使用这个插件，但个人看通过他们的文档，我没有找到设置数据集的本地选项。以下是有关如何将数据集设置到插件的更多信息。

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 2014-10-18 16:37:05

Typeahead插件不工作

回答

相关问题