Typeahead 插件不起作用
[英] Typeahead plugin is not working
本文介绍了Typeahead 插件不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图找出可能的问题，但我可能遗漏了什么?最新的 typeahead.js 0.10.5 插件.
无法理解为什么 typeahead 不起作用.谢谢.
这是代码
<头><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title><link href="~/Content/images/home.png" type="image/png" rel="icon"/>@Styles.Render("~/Content/css")@Scripts.Render("~/bundles/modernizr")<身体><div class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" rel="home" href="#" title="Home">Home</a>
<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">操作 </span><ul class="dropdown-menu" role="menu"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li>
<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 class="容器">@RenderBody()
@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/bootstrap")@RenderSection("scripts", required: false)<script type="text/javascript">$(document).ready(function () {$('input.typeahead').typeahead({name: '国家',本地:[阿拉巴马"、阿拉斯加"、西弗吉尼亚"、威斯康星"、怀俄明"]});});</html>
当然还有包含 typeahead.bundle.min.js 的 BundleConfig:
使用 System.Web;使用 System.Web.Optimization；命名空间 Homepage2{公共类 BundleConfig{//有关捆绑的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=301862public 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*"));//使用 Modernizr 的开发版本进行开发和学习.那么，当你//准备好用于生产，使用 http://modernizr.com 上的构建工具仅选择您需要的测试.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"));//将 EnableOptimizations 设置为 false 以进行调试.想要查询更多的信息，//访问 http://go.microsoft.com/fwlink/?LinkId=301862BundleTable.EnableOptimizations = true;}}}
解决方案
我从来没有亲自使用过这个插件，但是查看了他们的文档，我没有找到设置数据集的本地选项.以下是有关如何将数据集设置为插件的更多信息.
Typeahead.js 数据集
此外，这是他们的基本设置示例.>
遵循这两个并使用数据集的源"选项来设置您的示例，我想出了这个.
var substringMatcher = function(strs) {返回函数 findMatches(q, cb) {var 匹配，substrRegex；//将填充子字符串匹配的数组匹配 = [];//用于确定字符串是否包含子字符串`q`的正则表达式substrRegex = new RegExp(q, 'i');//遍历字符串池和任何字符串//包含子字符串 `q`，将其添加到 `matches` 数组$.each(strs, function(i, str) {如果(substrRegex.test(str)){//typeahead jQuery 插件需要建议//JavaScript 对象，请参阅 typeahead 文档以获取更多信息match.push({ value: str });}});cb(匹配)；};};var states = [阿拉巴马州"、阿拉斯加州"、西弗吉尼亚州"、威斯康星州"、怀俄明州"];$('input.typeahead').typeahead({提示:真实，亮点:真实，最小长度:1},{name: '状态',displayKey: '值',来源:substringMatcher(states)});
这里是 jsfiddle 链接.
让我知道这是否有效.
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.
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;
}
}
}
解决方案
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.
这篇关于Typeahead 插件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
