Question

我在多个字段上进行了角度搜索。只要搜索词中没有空格，我的搜索就会起作用。但是如果一个领域有空间，它就会破裂。这种情况正在发生，因为我试图根据空间分离搜索条件，因为空间对于用户来说更自然，然后是逗号分隔或管道或任何其他分隔符。

**
搜索宝马特价，你会发现你不会有任何结果**

这就是代码中我正在进行拆分的地方

$scope.q.split(' ').forEach(function(token) {
    matched = matched && match(car, token);
});

以下是plunker http://plnkr.co/edit/slzYsK1ohkC1ClEEpyiB?p=info

这是我的代码

的index.html

<!DOCTYPE html>
<html ng-app="myapp">

<head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
<div ng-controller="DemoCtrl">
    <input class="form-control" type="text" ng-model="q" placeholder="Search by year, make, model" />
    <br/>
    <ul>
        <li ng-repeat="car in cars | filter:filterCars">{{car.year}} {{car.make}} {{car.model}}</li>
    </ul>
</div>
</body>

</html>

的script.js

// Code goes here

var app = angular.module('myapp', []);

app.controller('DemoCtrl', [ '$scope', function($scope) {
    $scope.q = '';
    $scope.cars = [
        {
            year: 2006,
            make: 'BMW',
            model: 'M3'
        },
        {
            year: 2006,
            make: 'BMW',
            model: 'Z4'
        },
        {
            year: 1992,
            make: 'Mazda',
            model: 'Miata'
        },
        {
            year: 2008,
            make: 'BMW special',
            model: '750'
        }
    ];

    var match = function (item, val) {
        var regex = new RegExp(val, 'i');
        return item.year.toString().search(regex) == 0 ||
            item.make.search(regex) == 0 ||
            item.model.search(regex) == 0;
    };

    $scope.filterCars = function(car) {
        // No filter, so return everything
        if (!$scope.q) return true;
        var matched = true;

        // Otherwise apply your matching logic
        $scope.q.split(' ').forEach(function(token) {
            matched = matched && match(car, token);
        });

        return matched;
    };
}]);

Answer 1

我将函数匹配的定义更改为以下

// The following function will return true if
// the string in val is found in itme.year.toString(),
// item.make, or item.model
var match = function (item, val) {
  var regex = new RegExp(val, 'i');
  return item.year.toString().search(regex) >= 0 ||
         item.make.search(regex) >= 0 ||
         item.model.search(regex) >= 0;  
};

我对plunker中的代码进行了更改，输入bmw special确实返回了相应的记录。

Answer 2

q = 'BMW special'后来代码中的car = { year: 2008, make: 'BMW special', model: '750'}

 $scope.q.split(' ').forEach(function(token) {
     matched = matched && match(car, token);
 });

我们有：

match(car, 'BMW') = true,      because item.make.search(regex) = 0
match(car, 'special') = false, because item.make.search(regex) = 4

并且过滤结果为false。

item.make.search(regex) = 4表示item.make包含'special'，它从第4位开始。这就是为什么在返回语句效果中将== 0更改为>= 0的原因在适当的搜索结果。见plunker。我们有

match(car, 'BMW') = true,      because item.make.search(regex) = 0 (>= 0)
match(car, 'special') = true,  because item.make.search(regex) = 4 (>= 0)

并且过滤结果为真。

如果条款有空格，则搜索不起作用

2 个答案: