我正在使用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" />
每个输入字段都将通过查看API端点来自动完成。这应该是形式为
/api/1.0/code?type=presentation&code=123
或/api/1.0/code?type=chemical&code=123
。API调用中的
type
参数的值应取决于紧挨每个输入字段的<select>
元素的值。我遇到的问题是我不知道如何告诉Bloodhound
type
参数应该是什么。理想情况下,我想将其传递给Bloodhound,但我不知道如何做到这一点。 这是我的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()
});
如果有任何建议,我将不胜感激。
input
元素的id
都是相同的吗?是numeratorId
吗? - guest271314input
е…ѓзө зљ„id
пәЊж·»еЉ дғ†bnfMatches.initialize()
пәЊйЂ‰ж‹©е…·жњ‰д»Ө聚焦的input
е…ѓзөid
еәЂе¤өзљ„select
е…ѓзө гЂ‚ - guest271314