我正在使用Typeahead设置一个表单。我有两个相邻的输入字段,我需要对每个输入字段进行自动完成。我的 HTML 看起来像这样:
<select id="numerator">
<option value="presentation">presentation</option>
<option value="chemical">chemical</option>
</select>
<input id="numeratorId" class="typeahead" type="text" />
<br/>
<select id="denominator">
<option value="presentation">presentation</option>
<option value="chemical">chemical</option>
</select>
<input id="denominatorId" class="typeahead" type="text" />
每个input
字段都将通过查看 API 终结点自动完成。这应该是 /api/1.0/code?type=presentation&code=123
或 /api/1.0/code?type=chemical&code=123
的形式。
API 调用中 type
参数的值应取决于每个输入字段旁边的 <select>
元素的值。
我遇到的问题是我不知道如何告诉寻血猎犬type
参数应该是什么。
理想情况下,我想把它传递给寻血猎犬,但我不知道该怎么做。这是我的JavaScript:
var bnfMatches = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/1.0/code?',
replace: function(url, uriEncodedQuery) {
url = url + 'code=' + uriEncodedQuery;
// How to change this to denominator for denominator queries?
val = $('#numerator').val();
if (!val) return url;
return url + '&code_type=' + encodeURIComponent(val)
}
}
});
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'states',
displayKey: 'id',
source: bnfMatches.ttAdapter()
});
我将不胜感激任何建议。
尝试
.html
注意,删除了input
元素处的重复id
numeratorId
;分别替换了numeratorId
、denominatorId
。这也允许replace
函数中选择select
元素。
<select id="numerator">
<option value="presentation">presentation</option>
<option value="chemical">chemical</option>
</select>
<input id="numeratorId" class="typeahead" type="text" />
<br/>
<select id="denominator">
<option value="presentation">presentation</option>
<option value="chemical">chemical</option>
</select>
<input id="denominatorId" class="typeahead" type="text" />
.js
请注意,bnfMatches
未显示为已初始化。在Bloodhound
设置后添加了bnfMatches.initialize();
。
var bnfMatches = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/1.0/code?',
replace: function(url, uriEncodedQuery) {
var val = $(".typeahead").filter(":focus")
.attr("id").slice(0, -2);
var res = (url + "type=" + $("#" + val).val() + "&code="
+ encodeURIComponent(uriEncodedQuery));
console.log(res);
return res
}
}
});
bnfMatches.initialize();
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'states',
displayKey: 'id',
source: bnfMatches.ttAdapter()
});
var bnfMatches = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/1.0/code?',
replace: function(url, uriEncodedQuery) {
var val = $(".typeahead").filter(":focus")
.attr("id").slice(0, -2);
var res = (url
+ "type=" + $("#" + val).val() + "&code="
+ encodeURIComponent(uriEncodedQuery));
console.log(res);
return res
}
}
});
bnfMatches.initialize();
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'states',
displayKey: 'id',
source: bnfMatches.ttAdapter()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<select id="numerator">
<option value="presentation">presentation</option>
<option value="chemical">chemical</option>
</select>
<input id="numeratorId" class="typeahead" type="text" />
<br/>
<select id="denominator">
<option value="presentation">presentation</option>
<option value="chemical">chemical</option>
</select>
<input id="denominatorId" class="typeahead" type="text" />
Bloodhound's replace
可以这样使用
replace: function (url, query) {
if(_el.val() === "users"){
return url + '/users?q=' + query;
}else{
return url + '/repositories?q=' + query;
}
}
这是完整的示例。在示例中,我使用了 github 的公共 api。选择下拉列表用于在用户和存储库之间切换。
var make_dataset = function (el) {
var _el = el; // nearest select for input
var bloodhound = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://api.github.com/search',
filter: function (users) {
return $.map(users.items, function (user) {
return {
value: user.url
};
});
},
replace: function (url, query) {
if (_el.val() === "users") {
return url + '/users?q=' + query;
} else {
return url + '/repositories?q=' + query;
}
}
}
});
bloodhound.initialize();
var dataset = {
source: bloodhound.ttAdapter(),
}
return dataset;
}
/* initial setup */
$('.typeahead').each(function () { // each input
var select = $(this).siblings('select'); // select near each input
$(this).typeahead({
hint: true,
highlight: true,
minLength: 2
}, make_dataset(select)); // make_dataset initializes a bloodhound instance
});
这是一个完整的演示
希望这有帮助