Typeahead，如何根据另一个输入 select 来填充隐藏的输入？

Question

我正在使用一个搜索表单进行预输入，虽然一切正常，但我在找出问题所在时遇到了一些麻烦。它是航班搜索，搜索表单应该 post 只有特定的字母，但输入字段应该填写整个名称，所以我需要在隐藏字段中输入特定的字母。

这是我的例子。

$('.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></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" 输入字段中，提前搜索和 return 该字段的正确值。示例：(Eindhoven (EIN)) 但我只需要提交航班代码，因此我只需要使用 EIN 值填充隐藏字段。填充选定输入后，是否也可以预先填充隐藏字段？

Answer 1

是的，您可以将其保存到隐藏字段中，您只需要在 updater

中使用 this.$element 访问上下文

我在用户可以看到的字段中添加了一个 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></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>

Answer 2

有 "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></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;
    }
});

Typeahead，如何根据另一个输入 select 来填充隐藏的输入？

Typeahead, how to fill in hidden input based on another input select?

javascript

jquery

typeahead.js

解决方案