以编程方式选择带有 Bootstrap tagsinput 的 Bloodhound 自动完成标签列表
Programmatically choose list of Bloodhound autocomplete tags with Bootstrap tagsinput
我有一个由 Bootstrap Tagsinput
提供支持的文本输入。目前,此文本输入是使用 Typeahead
自动完成中使用的单个标签列表初始化的:
$('.tagsInput').tagsinput({
maxChars: 25,
maxTags: 5,
typeaheadjs: [{
minLength: 1,
highlight: true
},{
minlength: 1,
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: allTags
})
}],
freeInput: true
});
其中 allTags
是一个 Json 字符串数组。
然而,我想要实现的是,我没有一个简单的标签列表,即 allTags
,而是拥有某种可以访问不同列表的功能,然后能够 select 正确的取决于某些元素的值。例如,将有一个下拉列表,根据值 selected,将使用不同的标签列表。 我做不到。
虽然我找到了一个解决方法,但基本上,我在我的文本输入元素的 class 名称上播放,并且我在与列表一样多的 class 名称上初始化尽可能多的 tagsInput。这行得通,但它似乎太过体操而不是真正干净的实现。
有什么想法吗?
更新:
这是 HTML:
<input id="tags" name="tags" data-role="tagsinput" class="form-control input-sm tagsInput typeahead" type="text" placeholder="Enter some tags" title="Please enter some tags" value="" required>
select
是正常的select
。
当select
改变时你调用一个函数告诉Bloodhound使用哪个数组(或json文件/url),然后要求它重新运行 其 initialize
函数更新预输入建议列表。
Html:
<h1>Typeahead Test </h1>
<select onchange="changeList(this.value)">
<option selected value="countries">Countries</option>
<option value="cities">Cities</option>
</select>
<input id="tags" name="tags" data-role="tagsinput" class="form-control input-sm tagsInput typeahead" type="text" placeholder="Enter some tags" title="Please enter some tags" value="" required>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="bootstrap-tagsinput.min.js"></script>
Javascript:
var country_list = ["Afghanistan", "Albania", "Algeria", "Andorra", "Auckland", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil"];
var city_list = ["Amsterdam", "London", "Paris", "Washington", "New York", "Los Angeles", "Sydney", "Melbourne", "Canberra", "Beijing", "New Delhi", "Kathmandu", "Cairo", "Cape Town", "Kinshasa"];
var myData = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: $.map(country_list, function(item) {
return {
value: item
};
})
});
myData.initialize();
$('#tags').tagsinput({
typeaheadjs: {
name: 'value',
displayKey: 'value',
valueKey: 'value',
source: myData.ttAdapter()
}
});
// utilised some code from
changeList = function(val) {
source = (val === 'cities') ? city_list : country_list;
myData.clear(); // First remove all suggestions from the search index
myData.local = $.map(source, function(item) {
return {
value: item
};
});
myData.initialize(true); // Finally reinitialise the bloodhound suggestion engine
};
我有一个由 Bootstrap Tagsinput
提供支持的文本输入。目前,此文本输入是使用 Typeahead
自动完成中使用的单个标签列表初始化的:
$('.tagsInput').tagsinput({
maxChars: 25,
maxTags: 5,
typeaheadjs: [{
minLength: 1,
highlight: true
},{
minlength: 1,
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: allTags
})
}],
freeInput: true
});
其中 allTags
是一个 Json 字符串数组。
然而,我想要实现的是,我没有一个简单的标签列表,即 allTags
,而是拥有某种可以访问不同列表的功能,然后能够 select 正确的取决于某些元素的值。例如,将有一个下拉列表,根据值 selected,将使用不同的标签列表。 我做不到。
虽然我找到了一个解决方法,但基本上,我在我的文本输入元素的 class 名称上播放,并且我在与列表一样多的 class 名称上初始化尽可能多的 tagsInput。这行得通,但它似乎太过体操而不是真正干净的实现。
有什么想法吗?
更新: 这是 HTML:
<input id="tags" name="tags" data-role="tagsinput" class="form-control input-sm tagsInput typeahead" type="text" placeholder="Enter some tags" title="Please enter some tags" value="" required>
select
是正常的select
。
当select
改变时你调用一个函数告诉Bloodhound使用哪个数组(或json文件/url),然后要求它重新运行 其 initialize
函数更新预输入建议列表。
Html:
<h1>Typeahead Test </h1>
<select onchange="changeList(this.value)">
<option selected value="countries">Countries</option>
<option value="cities">Cities</option>
</select>
<input id="tags" name="tags" data-role="tagsinput" class="form-control input-sm tagsInput typeahead" type="text" placeholder="Enter some tags" title="Please enter some tags" value="" required>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="bootstrap-tagsinput.min.js"></script>
Javascript:
var country_list = ["Afghanistan", "Albania", "Algeria", "Andorra", "Auckland", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil"];
var city_list = ["Amsterdam", "London", "Paris", "Washington", "New York", "Los Angeles", "Sydney", "Melbourne", "Canberra", "Beijing", "New Delhi", "Kathmandu", "Cairo", "Cape Town", "Kinshasa"];
var myData = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: $.map(country_list, function(item) {
return {
value: item
};
})
});
myData.initialize();
$('#tags').tagsinput({
typeaheadjs: {
name: 'value',
displayKey: 'value',
valueKey: 'value',
source: myData.ttAdapter()
}
});
// utilised some code from
changeList = function(val) {
source = (val === 'cities') ? city_list : country_list;
myData.clear(); // First remove all suggestions from the search index
myData.local = $.map(source, function(item) {
return {
value: item
};
});
myData.initialize(true); // Finally reinitialise the bloodhound suggestion engine
};