如何通过IATA代码搜索机场。不按名称

Question

在航班预订网站上工作。我想通过IATA代码搜索机场。不是名字。

当我键入LON时，它应该在顶部显示伦敦，因为IATA代码是LON。

app.factory("States", function () {
    var states = [
        'Ansan, South Korea(A1N)', 'Asan, South Korea(A1S)', 'Atascadero - CA, United States(AA1)', 'Aachen, Germany(AAC)', 'Annaba, Algeria(AAE)', 'Aalborg, Denmark(AAL)', 'Al Ain, United Arab Emirates(AAN)', 'Arlon, Belgium(AAO)', 'Anapa, Russia(AAQ)', 'Aarhus, Denmark(AAR)', 'Arras, France(AAS)', 'Aalst, Belgium(AAT)', 'Araxa, Brazil(AAX)', 'Austrian Alps, Austria(AAZ)', 'Edmonton, Canada(AB)', 'Absecon - NJ, United States(AB5)', 'Austinburg - OH' 
    ]
    return states;
});

这是HTML代码

 <input name="states" id="city" style="font-size: 14px" type="text" 
        placeholder="Any worldwide city or airport"
        ng-model="selectedNumberNonEditable" allow-custom="false"
        typeahead="state for state in states | filter:$viewValue | limitTo:8" 
        class="form-control" required>

Answer 1

为此，必须修改您的数据模型以支持此功能。您可以使用拆分，正则表达式等在JavaScript中进行预处理，但这不是一个理想的情况，也不是您想要在客户端执行的操作。

如果您可以修改模型以使其具有单独的name和code属性，则此解决方案将有效：

给定一个这样的模型：{ 'name': 'Boston', 'code': 'BOS' }，并有一组aiports：

  $scope.airports = [
      { 'name': 'Boston', 'code': 'BOS' },
      { 'name': 'London, United Kingdom', 'code': 'LON'},
      { 'name': 'New London, CT', 'code': 'GON'}
    ]

你可以像这样创建一个类型：

<input type="text"
       ng-model="selected1"
       uib-typeahead="airport as airport.name + ' (' + airport.code + ')' for airport in airports | filter:{code:$viewValue} | limitTo:10"
       class="form-control" />

  

我已经用三种变体创建了一个Demo，一个带有显示器（带有代码的名称），一个带有代码，一个带有名称。

https://plnkr.co/edit/dLv4fTbqxG8W5legjnXr?p=preview