twitter bootstrap 3.0 typeahead ajax示例
Posted
技术标签:
【中文标题】twitter bootstrap 3.0 typeahead ajax示例【英文标题】：twitter bootstrap 3.0 typeahead ajax example 【发布时间】：2014-05-23 21:38:19 【问题描述】：bootstrap 2 有很多 typeahead ajax 示例，例如这里twitter bootstrap typeahead ajax example。
但是我使用的是 bootstrap 3，我找不到完整的示例，而是有一堆不完整的信息 sn-ps 与其他网站的链接，例如这里Where is the typeahead javascript module in Bootstrap 3 RC 1?
如果您通过 ajax 从服务器加载数据，每次用户更改输入时，有人可以发布一个关于如何在引导程序 3 中使用 typeahead 的完整工作示例。
【问题讨论】：
此示例适用于 Bootstrap 3 bootply.com/86571 @Baghoo，我正在寻找一个通过 Ajax 远程获取数据的示例。 【参考方案1】：通过 bootstrap3-typeahead，我可以使用以下代码：
<input id="typeahead-input" type="text" data-provide="typeahead" />
<script type="text/javascript">
jQuery(document).ready(function()
$('#typeahead-input').typeahead(
source: function (query, process)
return $.get('search?q=' + query, function (data)
return process(data.search_results);
);
);
)
</script>
后端在searchGET端点下提供搜索服务，接收q参数中的查询，返回 'search_results': ['resultA', 'resultB', ... ] 格式的JSON。 search_resultsarray 的元素显示在 typeahead 输入中。
【讨论】：
github.com/bassjobsen/Bootstrap-3-Typeahead 对我来说也是最快的升级方式 超级。在文档中找不到完整的示例。这个答案很有帮助 在这里也找到了一个很好的例子：tatiyants.com/… 工作正常，但不幸的是建议下拉。process 是什么意思？？【参考方案2】：
这是我的分步体验，灵感来自 typeahead examples，来自我们正在开发的 Scala/PlayFramework 应用程序。
在脚本LearnerNameTypeAhead.coffee (convertible of course to JS) 我有：
$ ->
learners = new Bloodhound(
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value")
queryTokenizer: Bloodhound.tokenizers.whitespace
remote: "/learner/namelike?nameLikeStr=%QUERY"
)
learners.initialize()
$("#firstName").typeahead
minLength: 3
hint: true
highlight:true
,
name: "learners"
displayKey: "value"
source: learners.ttAdapter()
我在页面上包含了预输入包和我的脚本，并且我的输入字段周围有一个div，如下所示：
<script src=@routes.Assets.at("javascripts/typeahead.bundle.js")></script>
<script src=@routes.Assets.at("javascripts/LearnerNameTypeAhead.js") type="text/javascript" ></script>
<div>
<input name="firstName" id="firstName" class="typeahead" placeholder="First Name" value="@firstName">
</div>
结果是，对于输入字段中第一个 minLength (3) 个字符之后键入的每个字符，页面都会发出一个 GET 请求，其 URL 类似于 /learner/namelike?nameLikeStr= 加上当前键入的字符。服务器代码返回一个包含字段“id”和“value”的对象的json数组，例如：
[
"id": "109",
"value": "Graham Jones"
,
"id": "5833",
"value": "Hezekiah Jones"
]
为了玩，我需要路线文件中的一些东西：
GET /learner/namelike controllers.Learners.namesLike(nameLikeStr:String)
最后，我在页面的<head>（或可访问的 .css）中包含一个新的 typeahead.css 文件中为下拉菜单等设置了一些样式
.tt-dropdown-menu
width: 252px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
.typeahead
background-color: #fff;
.typeahead:focus
border: 2px solid #0097cf;
.tt-query
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
.tt-hint
color: #999
.tt-suggestion
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
.tt-suggestion.tt-cursor
color: #fff;
background-color: #0097cf;
.tt-suggestion p
margin: 0;
【讨论】：
你从哪里得到的样式？没有它们，我的 BS-3 项目会很糟糕。有了样式，它看起来很棒。 @raider33 我想我是通过检查Twitter Typeahead Examples 的页面得到的。我可能不得不稍微调整以适应我的项目风格。 这是什么猎犬班？您能否重新发布 javascript 然后是咖啡脚本。我知道我可以转换它，但我认为每个人都可以阅读咖啡，可以阅读纯 javascript，但不能反过来。 @PascalKlein Bloodhound 是建议引擎，该代码根据迄今为止输入的内容决定要带回哪些选项。更多文档在TypeAhead page。用他们的话来说，有两部分需要提前输入：UI 视图（Typeahead）和建议引擎（在本例中为 Bloodhound）。 感谢您的示例。 “确保脚本中引用的是 div id，而不是输入 id”->您实际上指的是$("#getLearnerLike .typeahead")，这是该 div 中的输入字段。【参考方案3】：
我正在使用这个 https://github.com/biggora/bootstrap-ajax-typeahead
使用 Codeigniter/php 的代码结果
<pre>
$("#produto").typeahead(
onSelect: function(item)
console.log(item);
getProductInfs(item);
,
ajax:
url: path + 'produto/getProdName/',
timeout: 500,
displayField: "concat",
valueField: "idproduto",
triggerLength: 1,
method: "post",
dataType: "JSON",
preDispatch: function (query)
showLoadingMask(true);
return
search: query
,
preProcess: function (data)
if (data.success === false)
return false;
else
return data;
);
</pre>
【讨论】：
这是 Twitter Bootstrap 2.0+【参考方案4】：您可以在此处找到有关如何升级到 v3 的信息：http://tosbourn.com/2013/08/javascript/upgrading-from-bootstraps-typeahead-to-typeahead-js/
这里也有一些例子：http://twitter.github.io/typeahead.js/examples/
【讨论】：
升级是什么意思？您能否在此处输入一个有效示例。 我的意思是如果你有一个用于 bootstrap2 的预输入，你可以使用这个信息进行升级。第二个链接可能对您更有帮助？ 该链接已失效，请将内容放入答案中，而不是外部链接。【参考方案5】：<input id="typeahead-input" type="text" data-provide="typeahead" />
<script type="text/javascript">
var data = ["Aamir", "Amol", "Ayesh", "Sameera", "Sumera", "Kajol", "Kamal",
"Akash", "Robin", "Roshan", "Aryan"];
$(function()
$('#typeahead-input').typeahead(
source: function (query, process)
process(data);
);
);
);
</script>
【讨论】：
如果不是 100% 的代码，这个答案可以改进。以上是关于twitter bootstrap 3.0 typeahead ajax示例的主要内容，如果未能解决你的问题，请参考以下文章
如何在鼠标移入之前保持 Twitter Bootstrap Popover 打开？