Php 如何使用ajax自动完成引导标记字段?
我想将tokenfield用于引导:但是我似乎找不到任何关于如何使用AJAX的文档。我有一个包含json数据的.php文件,比如Php 如何使用ajax自动完成引导标记字段?,php,jquery,ajax,twitter-bootstrap,autocomplete,Php,Jquery,Ajax,Twitter Bootstrap,Autocomplete,我想将tokenfield用于引导:但是我似乎找不到任何关于如何使用AJAX的文档。我有一个包含json数据的.php文件,比如{“Hello”,“hemia”,“Hell”},我希望它是自动完成值。请注意,.php文件只返回与键入内容类似的值。有人能找到一种方法来做到这一点吗?任何帮助都将不胜感激。我只想用那个华丽的引导标记字段来自动完成标记,如果没有这个词,就不允许自动完成 谢谢。您需要从jqueryui或twitter的typeahead实现自动完成,然后应用特定选项 $('#activi
{“Hello”,“hemia”,“Hell”}
,我希望它是自动完成值。请注意,.php文件只返回与键入内容类似的值。有人能找到一种方法来做到这一点吗?任何帮助都将不胜感激。我只想用那个华丽的引导标记字段来自动完成标记,如果没有这个词,就不允许自动完成
谢谢。您需要从
jqueryui
或twitter的typeahead
实现自动完成,然后应用特定选项
$('#activity_tag_tokens').tokenfield({
typeahead: {
prefetch: '/tags.json',
remote: '/tags.json?q=%QUERY',
}
});
没关系。。。我找到了解决办法
$('#tokenfield1').tokenfield();
var mots_cles = "";
$.each(e.valeur_tableau_infos_tutoriel.Mots_cles, function (index,value){
mots_cles += value.mots_cles+',';
})
$('#tokenfield1').tokenfield('setTokens', mots_cles)
}
Bootstrap tokenfield-使用ajax通过远程调用提前键入自动完成 先决条件:
= stylesheet_link_tag 'sales_crm/tokenfield-typeahead.css'
= stylesheet_link_tag 'sales_crm/bootstrap-tokenfield.css'
%script{:src => "//code.jquery.com/ui/1.10.3/jquery-ui.js", :type => "text/javascript"}
= javascript_include_tag "sales_crm/bootstrap-tokenfield.js"
= javascript_include_tag "sales_crm/typeahead.bundle.min.js"
在HAML视图文件中:
%input#tokenfield-typeahead.form-control.add_locality_data{:type => "text", :value => "", :identifier=> "Locality"}/
1) 初始化猎犬搜索引擎
var engine = new Bloodhound({
remote: {
url: '/sales_crm/leads/get_lead_associated_info?query=%QUERY&model_class='+$('.add_locality_data').attr("identifier"),
filter: function (response) {
var tagged_user = $('#tokenfield-typeahead').tokenfield('getTokens');
console.log(tagged_user)
return $.map(response.leads, function (user) {
console.log(user)
var exists = false;
// console.log("velava saranam");
for (i=0; i < tagged_user.length; i++) {
if (user.value == tagged_user[i].value) {
var exists = true;
}
}
if (!exists) {
return {
value: user.value,
label: user.label
};
}
});
}
},
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});
engine.initialize();
$('#tokenfield-typeahead').tokenfield({
delimiter: false,
typeahead: [
{
name: 'users',
displayKey: 'label',
source: engine.ttAdapter()
}
]
})
.on('tokenfield:createtoken', function (e) {
var existingTokens = $(this).tokenfield('getTokens');
if (existingTokens.length) {
$.each(existingTokens, function(index, token) {
console.log(token)
if (token.value === e.attrs.value) {
e.preventDefault();
}else{
console.log(e.attrs.value)
}
});
}else{
console.log(e.attrs.value)
}
});
请说明如何使用Jquery Ui执行相同的操作?您也可以提供jqueryui版本吗?感谢约翰,下面是一个关于如何使用JQueryUI的例子,它对我很有用:(我知道这是一个老的参考资料,但这可能会帮助其他发现这个的Google用户)