4

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

这是我的代码：

<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”。

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

提前致谢。

4

5 回答 5

9

您需要创建一个过滤器功能（或一个完整的过滤器）。这是可能工作的最简单的事情：

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>

Javascript

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 一样在每个对象的每个属性中搜索），你必须增强过滤功能。我认为这个例子应该让你开始。

于 2013-08-10T20:30:13.283 回答
3

JavaScript为此提供了一个简洁的函数，称为localeCompare，您可以在其中指定sensitivity = base一个选项，使其将其á视为a等效，但并未得到广泛支持。我认为您唯一的选择是创建一个过滤器函数，您可以在其中手动规范化两个字符串（替换ó为o等等）并比较结果。

于 2013-08-10T18:38:58.240 回答
2

这是上面的一个稍微增强的版本（当然不包括它搜索的额外外来字符）。我将它直接放入我的控制器中，它允许我搜索我想要搜索的所有数据。感谢 Bernardo 对此的投入！

希望它可以帮助某人。

 function removeAccents(value) {
    return value
         .replace(/á/g, 'a') 
         .replace(/â/g, 'a')            
         .replace(/é/g, 'e')
         .replace(/è/g, 'e') 
         .replace(/ê/g, 'e')
         .replace(/í/g, 'i')
         .replace(/ï/g, 'i')
         .replace(/ì/g, 'i')
         .replace(/ó/g, 'o')
         .replace(/ô/g, 'o')
         .replace(/ú/g, 'u')
         .replace(/ü/g, 'u')
         .replace(/ç/g, 'c')
         .replace(/ß/g, 's');
}

$scope.ignoreAccents = function (item) {
if ($scope.search) {
var search = removeAccents($scope.search).toLowerCase();
var find = removeAccents(item.name + ' ' + item.description+ ' ' + item.producer+ ' ' +        item.region).toLowerCase();
return find.indexOf(search) > -1;
}
return true;
};
于 2014-11-01T19:50:26.027 回答
2

@Michael Benford 提出的方法有一个很大的缺点：它是一个有状态的过滤器。angular 强烈反对这种做法。另外，该方法不适用于深度数组和对象。

我更喜欢扩展标准角度过滤器：

HTML：

<div ng-app ng-controller="Ctrl">
    <input type="text" ng-model="search">
    <ul>
        <li ng-repeat="person in people | filter: search : searchFn">{{ person.names }} {{ person.surnames }}</li>
    </ul>
</div>

Javascript：

function Ctrl($scope) {
        $scope.people = [{names: 'Jose', surnames: 'Benítez'}, {names: 'José María', surnames: 'Núñez Rico'}, {names: 'Rodrigo', surnames: 'Núñez'}];

        $scope.searchFn = function(actual, expected) {
            if (angular.isObject(actual)) return false;
            function removeAccents(value) {
                return value.toString().replace(/á/g, 'a').replace(/é/g, 'e').replace(/í/g, 'i').replace(/ó/g, 'o').replace(/ú/g, 'u').replace(/ñ/g, 'n');
            }
            actual = removeAccents(angular.lowercase('' + actual));
            expected = removeAccents(angular.lowercase('' + expected));

            return actual.indexOf(expected) !== -1;
        }
}
于 2016-02-26T17:13:36.340 回答
1

在此处查看过滤对象列表并在每个对象的每个属性中搜索关键字的解决方案。它还保持类似角度的搜索，也可以搜索带/不带重音字符的搜索。

以下是过滤器定义：-

                // ignore accents filter
            $scope.ignoreAccents = function (item) {
                if (!$scope.search) return true;
                var objects = [];
                var jsonstr = JSON.stringify(item);
                var parsejson = JSON.parse(jsonstr);
                var searchterm = $scope.search.replace(/[!#$%&'()*+,-./:;?@[\\\]_`{|}~]/g, '');    // skip replace if not required (it removes special characters)
                objects = getNoOfResults(parsejson, searchterm);
                return objects.length > 0;
            };
于 2018-02-09T23:28:10.293 回答