我正在处理一种正在搜索的表格，尽管一切正常，但在解决问题时遇到了一些麻烦。它是对航班的搜索，搜索表应仅张贴特定字母，但输入字段应填写全名，因此我需要在隐藏字段中输入特定字母。
这是我所拥有的一个例子。
$('.typeahead').typeahead({
source: function (query, process) {
states = [];
map = {};
var data = [{
DisplayName: '(Eindhoven (EIN))',
Code: 'EIN',
Type: 'Airport',
CityName: 'Eindhoven'
}];
$.each(data, function (i, state) {
map[state.DisplayName] = state;
states.push(state.DisplayName);
});
process(states);
},
matcher: function (item) {
if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
return true;
}
},
sorter: function (items) {
return items;//items.sort();
},
highlighter: function (item) {
var regex = new RegExp( '(' + this.query + ')', 'gi' );
return item.replace( regex, "<strong>$1</strong>" );
},
updater: function (item) {
SelectedValue = map[item].DisplayName;
SelectedCode=map[item].Code;
SelectedType=map[item].Type;
SelectedCityName=map[item].CityName;
return SelectedCityName+' ('+SelectedCode+')';
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<div class="col-md-4 col-sm-6">
<label for="let_od"><small class="text-uppercase text-muted"><?php _e('Od')?></small></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="icon-location-8"></i></div>
</div>
<input type="text" class="form-control typeahead" data-provide="typeahead" name="let_od" id="let_od" placeholder="(grad ili aerodrom)" autocomplete="off"/>
<input type="hidden" name="let_od_iso" id="let_od_iso" autocomplete="off" value=""/>
</div>
</div>
<div class="col-md-4 col-sm-6">
<label for="let_do"><small class="text-uppercase text-muted"><?php _e('Do' )?></small></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="icon-location-8"></i></div>
</div>
<input type="text" class="form-control typeahead" data-provide="typeahead" name="let_do" id="let_do" placeholder="(grad ili aerodrom)" autocomplete="off"/>
<input type="hidden" name="let_do_iso" id="let_do_iso" autocomplete="off" value=""/>
</div>
</div>
因此，当我在字段之一（例如"let_od"输入字段）中输入任何内容时，请提前输入搜索内容并返回该字段的正确值。示例：(Eindhoven (EIN))，但是我只需要提交航班代码，因此我只需要使用EIN值填充隐藏字段。
填充选定的输入时，是否也可以提前填充隐藏字段？
答案 0 :(得分：0)
是的，您可以将其保存到隐藏字段中，只需要使用this.$element中的updater来访问上下文
data-hidden-field-id属性this.$element.data('hiddenFieldId')中用updater读取了该值SelectedCode
$('.typeahead').typeahead({
source: function (query, process) {
states = [];
map = {};
var data = [{
DisplayName: '(Eindhoven (EIN))',
Code: 'EIN',
Type: 'Airport',
CityName: 'Eindhoven'
}];
$.each(data, function (i, state) {
map[state.DisplayName] = state;
states.push(state.DisplayName);
});
process(states);
},
matcher: function (item) {
if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
return true;
}
},
sorter: function (items) {
return items;//items.sort();
},
highlighter: function (item) {
var regex = new RegExp( '(' + this.query + ')', 'gi' );
return item.replace( regex, "<strong>$1</strong>" );
},
updater: function (item) {
SelectedValue = map[item].DisplayName;
SelectedCode=map[item].Code;
SelectedType=map[item].Type;
SelectedCityName=map[item].CityName;
// Get hidden field id from data-hidden-field-id attribute
var hiddenFieldId = this.$element.data('hiddenFieldId')
// Save SelectedCode to hiddenfield
$(`#${hiddenFieldId}`).val(SelectedCode);
return SelectedCityName+' ('+SelectedCode+')';
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<div class="col-md-4 col-sm-6">
<label for="let_od"><small class="text-uppercase text-muted"><?php _e('Od')?></small></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="icon-location-8"></i></div>
</div>
<input type="text" class="form-control typeahead" data-provide="typeahead" data-hidden-field-id="let_od_iso" name="let_od" id="let_od" placeholder="(grad ili aerodrom)" autocomplete="off"/>
<input type="hidden" name="let_od_iso" id="let_od_iso" autocomplete="off" value=""/>
</div>
</div>
<div class="col-md-4 col-sm-6">
<label for="let_do"><small class="text-uppercase text-muted"><?php _e('Do' )?></small></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="icon-location-8"></i></div>
</div>
<input type="text" class="form-control typeahead" data-provide="typeahead" data-hidden-field-id="let_do_iso" name="let_do" id="let_do" placeholder="(grad ili aerodrom)" autocomplete="off"/>
<input type="hidden" name="let_do_iso" id="let_do_iso" autocomplete="off" value=""/>
</div>
</div>
答案 1 :(得分：0)
有一个“ afterSelect”用于此目的：
$('.typeahead').typeahead({
source: function (query, process) {
states = [];
map = {};
var data = [{
DisplayName: '(Eindhoven (EIN))',
Code: 'EIN',
Type: 'Airport',
CityName: 'Eindhoven'
},
{
DisplayName: '(Tallinn (TLN))',
Code: 'TLN',
Type: 'Airport',
CityName: 'Tallinn'
}];
$.each(data, function (i, state) {
console.log(state);
map[state.DisplayName] = state;
states.push(state.DisplayName);
});
process(states);
},
matcher: function (item) {
if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
return true;
}
},
sorter: function (items) {
return items;//items.sort();
},
highlighter: function (item) {
console.log(this);
var regex = new RegExp( '(' + this.query + ')', 'gi' );
return item.replace( regex, "<strong>$1</strong>" );
},
updater: function (item) {
SelectedValue = map[item].DisplayName;
SelectedCode=map[item].Code;
SelectedType=map[item].Type;
SelectedCityName=map[item].CityName;
return SelectedCityName+' ('+SelectedCode+')';
},
afterSelect: function(item){
id = this.$element[0].id+"_iso";
$('#'+id)[0].value = map['('+item+')'].Code;
}
});