Typeahead，如何根据另一个输入选择填充隐藏输入？

Question

我正在处理的一个搜索表单中有输入，虽然一切正常，但我在找出问题时遇到了一些麻烦。它是搜索航班，搜索表单应该只发布特定的字母，但输入字段应该填写全名，所以我需要将特定的字母放在隐藏字段中。

这是我所拥有的一个例子。

$('.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 值填充隐藏字段。 填充所选输入时，预输入也可以填充隐藏字段吗？

Answer 1

为此目的有“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;
    }
}); 

Answer 2

是的，您可以将其保存到您的隐藏字段中，您只需在您的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>$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>