twitter bootstrap typeahead ajax 示例 [英] twitter bootstrap typeahead ajax example
问题描述
我正在尝试找到 twitter bootstrap typeahead 元素的工作示例,该元素将使ajax 调用来填充它的下拉列表.
I'm trying to find a working example of the twitter bootstrap typeahead element that will make an ajax call to populate it's dropdown.
我有一个现有的工作 jquery 自动完成示例,它定义了 ajax url 以及如何处理回复
I have an existing working jquery autocomplete example which defines the ajax url to and how to process the reply
<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];
}
);
..
我需要更改什么才能将其转换为预先输入的示例?
What do i need change to convert this to the typeahead example?
<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];
}
);
..
我将等待添加远程源支持预输入"问题得到解决.
I'm going to wait for the 'Add remote sources support for typeahead' issue to be resolved.
推荐答案
Bootstrap 3 中不再捆绑 typeahead.请查看:
typeahead is no longer bundled in Bootstrap 3. Check out:
从 Bootstrap 2.1.0 到 2.3.2,你可以这样做:
As of Bootstrap 2.1.0 up to 2.3.2, you can do this:
$('.typeahead').typeahead({
source: function (query, process) {
return $.get('/typeahead', { query: query }, function (data) {
return process(data.options);
});
}
});
像这样使用 JSON 数据:
To consume JSON data like this:
{
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5"
]
}
请注意,JSON 数据必须是正确的 MIME 类型 (application/json),以便 jQuery 将其识别为 JSON.
Note that the JSON data must be of the right mime type (application/json) so jQuery recognizes it as JSON.
这篇关于twitter bootstrap typeahead ajax 示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!