Typeahead 在某些输入上显示错误

Question

我正在使用 uiTypehead 进行输入选择。

除了一个简单的事实外，它运行良好。我的输入总是有这样的形式

{name: "Las Vegas McCarran International (LAS)<span
class="country">United States</span>", iata: "LAS"}

所以我从后端插入 <span class="country">...</span> 到字符串中。

然后当我在输入字段中输入 "veg" 时，一切都很好。

但是，当输入 "las" 时，会发生以下情况：

基本上发生的是，我的系统假设 "class" 是我想要的字符串的一部分，在视图中执行以下操作：

<span c<strong="">lass="country"&gt;United States</span>

基本上，它会将 "las" 识别为字符串，并在该部分添加一个 strong 以使其无法正确显示。

我的视图、服务和控制器如下所示：

服务：

angular.module('tripdeltaApp').service('airportService',['$http',function($http){
    this.airport = function (entry) {
      return $http({
        method: 'POST',
        url: '/airport',
        data: {'search': entry}
      }).then(function (response) {
        return response.data.map(function (item) {
          //console.log(item);
          return item;
        });


      });
    };
}]);

控制器：

 $scope.onSelect = function ($item, $model, $label,to,index) {
    $model = urlParser.cleanAirport($model);
    if(to && $scope.flightArray[index+1] && !$scope.flightArray[index+1].from) {
      $scope.flightArray[index+1].from = $model;
    }
  };

并查看：

 <input type="text"
                               ng-focus="inputFocus=false"
                               ng-blur="inputFocus=true"
                               ng-model="flight.to"
                               placeholder="{{'TO'|translate}}"
                               name="arrivalAirport"
                               typeahead="data as data.name for data in getAirport($viewValue)"
                               class="form-control"
                               typeahead-editable="false"
                               typeahead-on-select="onSelect($item, $model, $label,1,$index)"
                               autocomplete="off"
                               select-on-click
                               required>

知道如何解决吗？

Answer 1

我认为最好的办法是使用带有标志的 Typeahead example 中所述的自定义模板，而不是将标记放入数据中。

你会把你的数据改成这样：

{name: "Las Vegas McCarran International (LAS)", country: "United States", iata: "LAS"}

并使用类似这样的模板：

<script type="text/ng-template" id="customTemplate.html">
   <div>
      {{match.model.name}}
      <span class="country">{{match.model.country}}</span>
   </div>
</script>

更新如果您不能更改后端的数据，您可以在数据加载到 JavaScript:

时对其进行预处理

var re = new RegExp('^([^<]+)<span class="country">([^<]+)<\/span>');

angular.module('tripdeltaApp').service('airportService',['$http',function($http){
    this.airport = function (entry) {
      return $http({
        method: 'POST',
        url: '/airport',
        data: {'search': entry}
      }).then(function (response) {
        return response.data.map(function (item) {
          //console.log(item);
          var matches = item.name.match(re);
          item.name = matches[1];
          item.country = matches[2];
          return item;
        });
      });
    };
}]);

正则表达式可能需要根据您拥有的具体数据进行一些调整。如果任何机场 "name" 字段有一个“<”，那显然会造成麻烦。您可能还需要弄乱间距、引号位置等。

Typeahead 在某些输入上显示错误

Typehead displays wrong on certain input

http

twitter-bootstrap

angularjs

angular-ui-bootstrap