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插件不工作

回答

相關問題