我试图找到一个工作的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];
}
);
..
我将等待“为typeahead添加远程源支持”问题得到解决。
从Bootstrap 2.1.0开始:
HTML:
<input type='text' class='ajax-typeahead' data-link='your-json-link' />
Javascript:
$('.ajax-typeahead').typeahead({
source: function(query, process) {
return $.ajax({
url: $(this)[0].$element[0].dataset.link,
type: 'get',
data: {query: query},
dataType: 'json',
success: function(json) {
return typeof json.options == 'undefined' ? false : process(json.options);
}
});
}
});
现在您可以创建统一的代码,在html代码中放置“json-request”链接。
更新:我修改了我的代码使用这个分叉
也不是使用$。每一个我都换成了$。由托米斯拉夫·马可夫斯基推荐的地图
$('#manufacturer').typeahead({
source: function(typeahead, query){
$.ajax({
url: window.location.origin+"/bows/get_manufacturers.json",
type: "POST",
data: "",
dataType: "JSON",
async: false,
success: function(results){
var manufacturers = new Array;
$.map(results.data.manufacturers, function(data, item){
var group;
group = {
manufacturer_id: data.Manufacturer.id,
manufacturer: data.Manufacturer.manufacturer
};
manufacturers.push(group);
});
typeahead.process(manufacturers);
}
});
},
property: 'name',
items:11,
onselect: function (obj) {
}
});
然而,我遇到了一些问题
无法调用undefined的方法“toLowerCase”
正如你在一个新的帖子上看到的,我正在试图弄清楚
希望这个更新对你有任何帮助…