与开头的查询结果排名较高的预输入 [英] Typeahead with results starting with query ranked higher

问题描述

我使用的是AngulaJS 预输入指令类似如下：

I'm using the AngulaJS typeahead directive like follows:

typeahead="elements.name for elements in someObject.elements | filter:{name:$viewValue} | orderBy:'name'

随着 $ viewValue 是'富'输出看起来像这一点，并在确切顺序：

With the $viewValue being 'foo' the output looks like this and in the exact order:

在富先走结果
在后富去酒吧结果
酒吧到来之前的富结果
富来之后吧结果
富酒吧是真棒

a foo goes first
after the foo goes a bar
bar comes before foo
foo comes after bar
foobar is awesome

我想有开头的查询结果被排名较高，像这样的：

I'd like to have results starting with query being ranked higher, like this:

富来之后吧结果
富酒吧是真棒结果
一个富先走结果
在后富去酒吧结果
酒吧到来之前的富

foo comes after bar
foobar is awesome
a foo goes first
after the foo goes a bar
bar comes before foo

但我看不出有任何干净地做到这一点。

But I don't see any way to do this cleanly.

我也试过是这样的：

$scope.startsWith = function (state, viewValue) {
   return state.substr(0, viewValue.length).toLowerCase() === viewValue.toLowerCase();
};

使用它像

...如下：

...using it like follows:

typeahead="elements.name for elements in someObject.elements | filter:{name:$viewValue}:startsWith | orderBy:'name'

结果是这样的：

富来之后吧结果
富酒吧是真棒

foo comes after bar
foobar is awesome

任何想法？

推荐答案

我试过本的做法可能是正确的在大多数情况下，但对我来说din't工作，因为我有递归NG-包括并不能利用纳克-model。

I tried Ben's approach which may be right in most cases, but for me it din't work because I have recursive ng-includes and cannot make use of ng-model.

下面是我如何解决我的问题（这是一个有点黑客攻击的，我承认，但我把它的干净的黑客的）：

Here is how I solved my problem (it's a little of a hack, I admit, but I'd call it a clean hack):

我滥用以下筛选故意，为了节约viewValue并在其上过滤器在我的 typeaheadService queryObj 属性code>订购之前。我还用它来选择对的属性进行过滤。

I misuse the following filter purposely, in order to save viewValue and the property on which the filter is applied as queryObj in my typeaheadService before ordering. I also use it to filter on a property of choice.

app.filter('typeaheadFilter', ['typeaheadService', function (typeaheadService) {
    return function (input, queryObj) {
        var key = Object.keys(queryObj)[0],
            query = queryObj[key];

        typeaheadService.setQueryObject(queryObj); // called once, when the viewValue changes

        if (!query) {
            return input;
        }
        var result = [];

        angular.forEach(input, function (object) {
            if (object[key].toLowerCase().indexOf(query.toLowerCase()) !== -1) {
                result.push(object);
            }
        });
        return result;
    };
}]);

这是怎么了 typeaheadService 看起来像（此服务被用于设置和获取所有typeaheads查询对象）：

And here is how the typeaheadService looks like (this service is used to set and get the query object for all typeaheads):

app.factory('typeaheadService', [
    function () {
        var typeaheadQueryObj;
        return {
            getQueryObject: function () {
                return typeaheadQueryObj;
            },
            setQueryObject: function (queryObj) {
                typeaheadQueryObj = queryObj;
            }
        };
    }
]);

在我的 MainController 添加我的 smartOrder 函数的 $范围：

In my MainController I add my smartOrder function to the $scope:

$scope.smartOrder = function (obj) {
    var queryObj = typeaheadService.getQueryObject(),
        key = Object.keys(queryObj)[0],
        query = queryObj[key];
    if (obj[key].toLowerCase().indexOf(query.toLowerCase()) === 0) {
        return ('a' + obj[key]);
    }
    return ('b' + obj[key]);
};

最后，我的预输入：

typeahead="element.name for element in elements | typeaheadFilter:{name:$viewValue} | orderBy:smartOrder | limitTo:dropdownMenuLimit"

这篇关于与开头的查询结果排名较高的预输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！