对于bootstrap 2有很多类型的ajax示例,例如这里的twitter bootstrap typeahead ajax示例.
但是我使用bootstrap 3并且我找不到完整的示例,而是只有一堆不完整的信息片段,其中包含指向其他网站的链接,例如,这里的Bootstrap 3 RC 1中的typeahead JavaScript模块在哪里?
如果您每次用户更改输入时通过ajax从服务器加载数据,有人可以发布一个完整的工作示例,说明如何使用带引导程序3的typeahead.
autocomplete bootstrap-typeahead typeahead.js twitter-bootstrap-3
我正在尝试使用twitter bootstrap从我的数据库中获取制造商.
因为twitter bootstrap typeahead不支持ajax调用我使用这个fork:
https://gist.github.com/1866577
在该页面中,有一条评论提到了如何做我想做的事情.问题是当我运行我的代码时,我继续得到:
未捕获的TypeError:无法调用未定义的方法'toLowerCase'
我谷歌搜索并试图改变我的jquery文件使用缩小和非缩小以及谷歌代码上托管的文件,我一直得到相同的错误.
我的代码目前如下:
$('#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) {
}
});
Run Code Online (Sandbox Code Playgroud)
在url字段我添加了
window.location.origin
避免任何已经在另一个问题上讨论的问题
在我使用之前$.each(),然后决定$.map()在类似的问题中使用推荐的Tomislav Markovski
任何人都知道我为什么一直遇到这个问题?!
谢谢
使用Bootstrap的typeahead javascript插件,我试图通过jQuery的$ .post方法更改数据源属性.最初,我有:
<input type="text" data-provide="typeahead" data-source="["Option 1","Option 2","Option 3"]">
Run Code Online (Sandbox Code Playgroud)
然后,假设单击了一个按钮,它会尝试更新数据源:
$('button').on('click',function(){
$.post('update.php',function(resp){
$('input').attr('data-source',resp);
});
});
Run Code Online (Sandbox Code Playgroud)
resp XHR结果返回如下数组:
["One Option","Two Option","Three Option"]
Run Code Online (Sandbox Code Playgroud)
我发现这不能使用响应中构造的新数组可靠地更新数据源.
有谁知道是什么问题?
这似乎不会捕获所选值.有没有人知道如何使用带引导程序的typeahead获取所选值?
我正在将我的应用程序迁移到twitter-bootstrap,我想用typeahead.js替换我的jquery-ui自动完成.
最好使用twitter-bootstrap中嵌入的功能,但如果需要,我可以使用额外的typeahead插件.
我的问题是我很难再现当前的行为,尤其是在没有结果的情况下.
你会怎么做那样的事情?
$("#search").autocomplete({
source : myUrl,
delay : 100,
minLength : 2,
select : function(event, ui) {
// do whatever i want with the selected item
},
response : function(event, ui) {
if (ui.content.length === 0) {
ui.content.push({
label : "No result",
value : customValue
});
}
}
});
Run Code Online (Sandbox Code Playgroud)
基本上,如果没有结果,我想在组件中显示自定义消息.
谢谢!
jquery-ui twitter-bootstrap bootstrap-typeahead typeahead.js
type-head功能是否支持twitter-bootstrap 2.0.3版中的远程数据源?
打印头功能的链接 http://twitter.github.com/bootstrap/javascript.html#typeahead
我有以下代码使用版本2.3.0初始化typeahead:
jQuery('#search_terms').typeahead({
source: function(query, process) {
return jQuery.ajax({
url: '/api/path',
type: 'GET',
data: {q: query},
dataType: 'json',
success: function (json) {
return process(json.suggestion);
}
});
}
});
Run Code Online (Sandbox Code Playgroud)
我已经通过替换静态数据验证了typeahead的工作原理.我已经看到json.suggestion按预期计算单个单词.ajax响应本身如下所示:
{"suggestion":"word"}
Run Code Online (Sandbox Code Playgroud)
但是,Bootstrap拒绝将响应加载到typeahead.我错过了什么?我承认我很难通过ajax找到Bootstrap Typeahead的详细文档.
提前致谢.