ngstrap typeahead 无序多关键字搜索

Question

我在使用 ngstrap typeahead 时遇到以下情况：

var companyItem= [
 {
"item_id": 1,
"item_name": "mobile phone middle nokia",
"company_id": 1,

},
{
"item_id": 2,
"item_name": "mobile phone iphone",
"company_id": 1,

},
{
"item_id": 8,
"item_name": "mobile phone samsung",
"company_id": 1,

},
{
"item_id": 9,
"item_name": "apple watch",
"company_id": 1,

}
]

我的标记：

<input type="text" class="form-control" name="itemName" id="itemName" ng-model="item.itemName" data-min-length="0" bs-options="item as item.item_name for item in companyItem | filter:{item_name:$viewValue}:customCompare" bs-typeahead="setCustomerData" data-watch-options="true" data-container="body" autocomplete="off" ng-readonly="readOnly" required>

我的脚本是：

$scope.customCompare = function(itemName, viewValue) {
    var keyword = viewValue.split(" ");
    var partialMatch = false;

    for(var i=0;i<keyword.length;i++){
          console.log('keyword'+i+' '+keyword[i]);
            console.log('itemName '+itemName);
            console.log('keyword[i].indexOf(itemName) > -1 '+itemName.indexOf(keyword[i].toString()));
            if(itemName.indexOf(keyword[i].toString()) > -1){
               console.log(' <<>>---------------');
                partialMatch =true;

            }       

    }
       return partialMatch;
}

我尝试在输入文本中使用关键字 'mobile iphone' 进行搜索，但没有结果。

这个 return 是真的，因为我在控制台日志中写了，但记录没有显示

无论如何，如果 'phone iphone' 它像默认输入一样工作

我做错了什么或者这个方法不起作用

https://plnkr.co/edit/3iJwREetLMnTup24Sbtd

提前致谢。

Answer 1

Ng-strap adds a default filter that uses a default comparator 在你的 item as item.item_name for item in companyItem | filter:{item_name:$viewValue}:customCompare.

之后

一个 hacky 解决方案是绕过默认过滤器。

$scope.alwaysTrue = function() { return true; }

<input ... bs-options="item as item.item_name for item in companyItem | filter:{item_name:$viewValue}:customCompare" data-comparator="alwaysTrue" ...>

更简洁的解决方案是设置 data-comparator="customCompare"。遗憾的是，这不起作用，因为 here 包含 :$viewValue，而不是 :{item_name: $viewValue}。因此，customCompare 永远无法处理整个对象。

API 可以而且应该得到改进，你应该在 github 上打开一个关于它的问题。

Answer 2

我在 typeahead.js 中看到 "filter: 'bsAsyncFilter'" 时得到了另一个解决方案，所以我通过绕过过滤器在我的 js 中覆盖，因为现在我正在通过 api 使用异步数据：

function CustomTypeaheadFilter ($filter)  {
return function(array, expression, comparator) {

  if(array && angular.isFunction(array.then)) {
    return array.then(function(results) {
        console.log(results);
     // return $filter('filter')(results, expression, comparator)
     return results;
    });
  } else {
    //return $filter('filter')(array, expression, comparator);
    return array;
  }
}
};

加价：

<input type="text" class="form-control" name="itemName" id="itemName" ng-model="item.itemName" data-min-length="0" bs-options="item as item.item_name for item in getItemfromDB($viewValue)" bs-typeahead="setCustomerData" data-filter="CustomTypeaheadFilter" autocomplete="off"  required>

过滤器选项未在 ngstrap 文档中声明，我已将问题发布到 github 无论如何希望 ngstrap 将此选项添加到文档中。

ngstrap typeahead 无序多关键字搜索

ngstrap typeahead unordered multiple keyword search

javascript

angularjs

angular-strap