Question

我正在尝试为城市查找实施typeahead，但该字段未更新。城市详细信息显示，但我需要在点击城市时显示城市名称，但是在发送表单时，我只需要发送城市代码。

这是我的HTML：

<input id="_hotelCity" class="form-control typehead" type="text" value="" placeholder="Enter city name or code " />

这是javascript：

$('#_hotelCity').typeahead({
    source: function (query, process) {
        airports = [];      
        map = {};
        var data = (function () {
            var data = null;
            $.ajax({
                'async': false,
                'global': false,
                'url': 'http://localhost/imakeway/forms/finder/iata-aero-codes.json',
                'dataType': "json",
                'success': function (jdata) {
                    data = jdata;
                }
            });
            return data;
        })(); 

        $.each(data, function (i, airport) {
            map[airport.complete_location] = airport;
            airports.push(airport.city + ' ( <b>' + airport.iata_code + '</b> - ' + airport.airport_name + ') near ' + airport.complete_location);
        });

        process(airports);    
    },
    updater: function (item) {
        selectedairport = map[item].complete_location;
        selectedairport = map[item].iata_code;
        return item;
    },
    matcher: function (item) {
        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
            return true;
        }
    },
    sorter: function (items) {
        return items.sort();
    },
    highlighter: function (item) {
        var regex = new RegExp( '(' + this.query + ')', 'gi' );
        return item.replace( regex, "<strong>$1</strong>" );
    },
});

感谢您提出任何建议

Answer 1

HTML input标记只能有一个值。该值存储在内部并显示在字段内。

您似乎正在使用某种AJAX表单提交。因此，您的解决方案是在JS中使用单独的变量来存储城市代码。

另一种解决方案是使用Select2而不是typeahead。当您提供类似SELECT的字段但需要外部AJAX数据源时，这是我的选择。顺便说一句，使用Select2，您也可以强制用户只选择现有值。

在这里查看例如：http://ivaynberg.github.io/select2/#ajax

Answer 2

我建议您使用额外的hidden字段，将其更新为正常输入字段。

<input id="_hotelCity" class="form-control typehead" type="text" value="" placeholder="Enter city name or code " />
<input type="hidden" value="" name="city_code" />

在此隐藏字段中，每次更新预先输入时都会放置城市代码。提交表单时，您的服务器端脚本可以解析它（在PHP中它将$_POST['city_code']）。

Answer 3

使用typeahead，并不想替换你的大部分代码。我最后得到了这个小提琴：http://jsfiddle.net/Ydtq9/2/

你肯定想要重构一些东西，但诀窍是在源函数中设置一些实例变量，你可以在updater函数中访问它们，如此

$("#_hotelCity").typeahead({
  "source": function(query, process) {
    this.map = ...
  },
  "updater": function(item) {
    var city = this.map(item)

    //Then you can do what you need to with the original data.
  }
})

预先不更新字段

3 个答案: