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

发布时间：2020-12-17 18:00:18 所属栏目：安全来源：网络整理

导读：我在页面上添加了一个简单的排序.我们的想法是搜索产品.这些产品以西班牙语编写并具有重音.例如：’Jamón’. 这是我的代码： div class="form-inline" labelSearch/label input type="text" ng-model="q"//divdiv ng-repeat="product in products_filtered

我在页面上添加了一个简单的排序.我们的想法是搜索产品.这些产品以西班牙语编写并具有重音.例如：’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”.

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

提前致谢.

解决方法

您需要创建过滤器功能(或完整过滤器).这是最简单的事情：

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 here.

请注意,这仅适用于字符串数组.如果要过滤对象列表(并在每个对象的每个属性中搜索,如Angular那样),则必须增强过滤器功能.我想这个例子应该让你开始.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!