代码之家 › 专栏 › 技术社区 › lonerunner

如何根据另一个输入选择填写隐藏输入?

typeahead.js jquery javascript

lonerunner · 技术社区 · 7 年前

我在一个搜索表单中使用了typeahead,虽然一切正常,但我在解决问题时遇到了一些麻烦。这是搜索航班和搜索表单应该只张贴特定的字母,但输入字段应填写全名,所以我需要把特定的字母在隐藏字段。

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

$('.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 填充选定输入时,typeahead是否也可以填充隐藏字段?

2 回复 | 直到 7 年前

AnonymousSB 7 年前

this.$element 在你的 updater

data-hidden-field-id 属性设置为用户可以看到的字段
我读这个值时带着怀疑 this.$element.data('hiddenFieldId') 在…内 更新程序
我使用 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>

Sven Liivak 7 年前

$('.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;
    }
});