angularjs搜索并忽略西班牙语字符

一尘不染

angularjs搜索并忽略西班牙语字符

angularjs

我在页面上添加了一个简单的排序。这个想法是搜索产品。这些产品是用西班牙语编写的，带有口音。例如：“Jamón”。

这是我的代码：

<div class="form-inline">
  <label>Search</label>
  <input type="text" ng-model="q"/>
</div>

<div ng-repeat="product in products_filtered = (category.products | filter:q | orderBy:'name')">
           ....
</div>

我唯一的问题是您必须输入“Jamón”才能找到产品“Jamón”。我想要的是更加灵活，如果用户键入“ Jamon”，则结果必须包含“Jamón”。

如何使用角度过滤器进行搜索而忘记重音符号？任何想法？

提前致谢。

阅读 211

2020-07-04

共1个答案

一尘不染

您需要创建一个过滤器功能（或完整的过滤器）。这是可能可行的最简单的方法：

HTML

<div ng-app ng-controller="Ctrl">
    <input type="text" ng-model="search">
    <ul>
        <li ng-repeat="name in names | filter:ignoreAccents">{{ name }}</li>
    </ul>
</div>

Java脚本

function Ctrl($scope) {
    function removeAccents(value) {
        return value
            .replace(/á/g, 'a')            
            .replace(/é/g, 'e')
            .replace(/í/g, 'i')
            .replace(/ó/g, 'o')
            .replace(/ú/g, 'u');
    }

    $scope.ignoreAccents = function(item) {               
        if (!$scope.search) return true;

        var text = removeAccents(item.toLowerCase())
        var search = removeAccents($scope.search.toLowerCase());
        return text.indexOf(search) > -1;
    };

    $scope.names = ['Jamón', 'Andrés', 'Cristián', 'Fernán', 'Raúl', 'Agustín'];
};

jsFiddle 在这里。

请注意，这仅适用于 字符串数组。如果要过滤对象列表（并像Angular一样搜索每个对象的每个属性），则必须增强过滤功能。我认为这个例子应该使您入门。

2020-07-04