javascript Bootstrap Typeahead.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17155439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Typeahead.js
提问by user1288906
I have been trying to get the bootstrap typeahead to work, with no luck whatsoever. I have pasted the code I have. I have reference Jquery-1.9.1 and typeahead.js. What am I doing wrong? Your help is much appreciated! Thanks.
我一直试图让引导程序提前工作，但没有任何运气。我已经粘贴了我的代码。我有参考 Jquery-1.9.1 和 typeahead.js。我究竟做错了什么？非常感谢您的帮助！谢谢。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script src="Scripts/typeahead.js-master/test/vendor/jquery-1.9.1.js"></script>
<script src="Scripts/typeahead.js-master/src/typeahead.js"></script>
<title></title>
</head>
<body>
<form>
<div>
<input type="text" data-provide="typeahead" autocomplete="off" data-source='["arizona","alaska"]' />
</div>
</form>
</body>
</html>
回答by chrismborland
It looks like you're getting confused between typeahead.js(by Twitter) and Twitter Bootstrap's Typeahead feature
看起来您对typeahead.js（由 Twitter 提供）和Twitter Bootstrap 的 Typeahead 功能感到困惑
You're including the library for typeahead.js
您正在包括 typeahead.js 的库
<script src="Scripts/typeahead.js-master/src/typeahead.js"></script>
<script src="Scripts/typeahead.js-master/src/typeahead.js"></script>
but trying to use it like Twitter Bootstrap's typeahead feature.
但试图像 Twitter Bootstrap 的预先输入功能一样使用它。
Make sure you're including the Twitter Bootstrap library, if you want to use your current code:
如果要使用当前代码，请确保包含 Twitter Bootstrap 库：
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Here's an example: jsFiddle
这是一个例子： jsFiddle
回答by chiyango
I hope this is what you expection. Here is the complete code try with necessary dependencies.
我希望这是你的期望。这是具有必要依赖项的完整代码尝试。
<!DOCTYPE html>
<html>
<head>
<title>Member</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
<script>
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})
</script>
</body>
</html>
回答by Aswanth
The Type head File with add two features:
带有添加两个功能的类型头文件：
- Type Space Bar Show All Auto Complete Data's
- If you Give Data with Space also Can be Sort and Display Data's
- 键入空格键显示所有自动完成数据
- 如果你给数据带空间也可以排序和显示数据的
Change The Lookup Function This:
将查找功能更改为：
lookup: function (event) {
var that = this,
items;
if (that.ajax) {
that.ajaxer();
}
else if (($.trim(that.$element.val())) == "") {
that.query = that.$element.val();
if (!that.query) {
return that.shown ? that.hide() : that;
}
items = that.source;
if (!items || !items.length) {
return that.shown ? that.hide() : that;
}
return that.render(items.slice(0, that.options.items)).show();
}
else {
that.query = $.trim(that.$element.val());
if (!that.query) {
return that.shown ? that.hide() : that;
}
items = that.grepper(that.source);
if (!items || !items.length) {
return that.shown ? that.hide() : that;
}
return that.render(items.slice(0, that.options.items)).show();
}
},
