我正在尝试找到一个twitter bootstrap typeahead元素的工作示例,该元素将进行ajax调用以填充它的下拉列表 .
我有一个现有的工作jquery自动完成示例,它定义了ajax url以及如何处理回复
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { minChars:3, max:20 };
$("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
我需要更改什么来将其转换为typeahead示例?
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { source:'/index/runnerfilter/format/html', items:5 };
$("#runnerquery").typeahead(options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
我'm going to wait for the ' Add remote sources support for typeahead'问题有待解决 .
16 回答
编辑:在bootstrap 3中不再捆绑typeahead . 退房:
Where is the typeahead JavaScript module in Bootstrap 3 RC 1?
typeahead.js
从Bootstrap 2.1.0到2.3.2,你可以这样做:
要使用这样的JSON数据:
请注意,JSON数据必须是正确的mime类型(application / json),因此jQuery将其识别为JSON .
您可以使用支持ajax调用的BS Typeahead fork . 然后你就可以写:
从Bootstrap 2.1.0开始:
HTML:
使用Javascript:
现在,您可以制作统一的代码,在您的HTML代码中放置“json-request”链接 .
所有响应都引用BootStrap 2 typeahead,它在BootStrap 3中不再存在 .
对于在这里寻找使用新post-Bootstrap Twitter typeahead.js的AJAX示例的其他人,这是一个工作示例 . 语法有点不同:
此示例使用同步(对 processSync 的调用)和异步建议,因此您会看到一些选项立即出现,然后添加其他选项 . 你可以使用其中一个 .
有许多可绑定事件和一些非常强大的选项,包括使用对象而不是字符串,在这种情况下,您将使用自己的自定义 display 函数将项目呈现为文本 .
我用ajax功能扩充了原始的typeahead Bootstrap插件 . 非常好用:
这是github回购:Ajax-Typeahead
我对jquery-ui.min.js做了一些修改:
并添加以下css
工作完美 .
我正在使用这种方法
可以使用Bootstrap进行调用 . 当前版本没有任何源更新问题Trouble updating Bootstrap's typeahead data-source with post response,即更新后的引导程序源可以再次修改 .
请参考下面的示例:
对于那些寻找已接受答案的咖啡版版本的人:
我经历了这篇文章,一切都不想正常工作,最终从几个答案拼凑出来,所以我有一个100%的工作演示,并将它粘贴在这里作为参考 - 粘贴到一个PHP文件,并确保包括在正确的地方 .
更新:我使用this fork修改了我的代码
我也没有使用$ .each,而是根据Tomislav Markovski的建议更改为$ .map
但是我遇到了一些问题
正如你在新帖子上看到的那样我试图找出here
希望这个更新对你有任何帮助......
如果您的服务未返回正确的application / json内容类型标头,请尝试此操作:
我没有适合您的工作示例,也没有一个非常干净的解决方案,但让我告诉您我发现了什么 .
如果你查看TypeAhead的javascript代码,它看起来像这样:
此代码使用jQuery“grep”方法匹配源数组中的元素 . 我没有看到任何可以挂在AJAX调用中的地方,因此没有一个“干净”的解决方案 .
但是,你可以这样做的一种有点hacky方式是利用grep方法在jQuery中的工作方式 . grep的第一个参数是源数组,第二个参数是用于匹配源数组的函数(通知Bootstrap调用初始化时提供的“匹配器”) . 你可以做的是将源设置为一个虚拟的单元素数组,并将匹配器定义为一个带有AJAX调用的函数 . 这样,它只运行一次AJAX调用(因为你的源数组只有一个元素) .
这个解决方案不仅是hacky,而且还会遇到性能问题,因为TypeAhead代码旨在对每个按键进行查找(AJAX调用应该只发生在每几次击键或一定量的空闲时间之后) . 我的建议是尝试一下,但要坚持使用不同的自动完成库,或者只在遇到任何问题时才将其用于非AJAX情况 .
使用ajax时,如果您无法正确显示结果,请尝试
$.getJSON()
而不是$.get()
.在我的情况下,当我使用
$.get()
时,我只得到每个结果的第一个字符,尽管我使用json_encode()
服务器端 .我使用
$().one()
来解决这个问题;当页面加载时,我将ajax发送到服务器并等待完成 . 然后将结果传递给函数 .$().one()
很重要 . 因为强制 typehead.js 连接到输入一次 . 抱歉写不好 .?>