使用文本框过滤和搜索

Question

这个问题是My Previous Question on Filtering DropdownList的后续问题

我正在添加一个额外的功能，为此我想使用文本框过滤值。这是过滤器的代码

var filterAndLimitResults = function (cursor) {

if (!cursor) {
    return [];
}

var raw = cursor.fetch();
var currentSearchTitle = searchTitle.get();

if(!(!currentSearchTitle || currentSearchTitle == "")) {
      filtered = _.filter(filtered, function (item) {
              return item.title === currentSearchTitle ;
              console.log(item.title === currentSearchTitle);
      });
    }
var currentLimit =limit.get();
//enforce the limit
if (currentLimit ) {
    filtered = _.first(filtered, currentLimit );
}
return filtered;
};

这是我在搜索文本框上进行的keyup 事件

"keyup #search-title":function(e,t){
     if(e.which === 27){
       searchTitle.set("");
     }
     else {
       var text = $(e.target.val);
       searchTitle.set(text)
       console.log(searchTitle.set(text));
     }
   }

有了这个，我可以在console 中的每个按键上返回总集合对象，但它不会过滤列表中的值，它会从 UI 中消失所有列表。请帮忙

Answer 1

你几乎是对的。您的 keyUp 事件没问题，但您也可以避免像这样使用 jQuery：

"keyup .textInput": function(e, t) {
    var searchString = e.currentTarget.value;
    switch (e.which) {
        case 27:
        e.currentTarget.value = "";
        searchTitle.set("");
        break;
        default:
        searchTitle.set(searchString);
    }
}

请注意，如果您想为特定搜索添加快捷方式，我会使用开关，例如 cmd+maj+c 仅搜索城市（这可能有点矫枉过正）

关于搜索功能，我假设您想在当前下拉过滤中搜索您的项目的标题。 然后，您需要添加一个额外的步骤来执行此操作。您还需要在其他过滤器之前设置它。看我下面的例子，你在var filtered = [];后面插入：

var filtered = [];
var currentSearchTitle = searchTitle.get();
if(!currentSearchTitle || currentSearchTitle == "") {
    filtered = raw;
} else {
    currentSearchTitle = currentSearchTitle .replace(".", "\\.");//for regex
    var regEx = new RegExp(currentSearchTitle , "i");

    filtered = _.filter(raw, function(item) {
        return (item && item.title && item.title.match(regEx));
    });
}
// your other filtering tasks
return filtered;

另外，花点时间了解代码的作用，不能只是复制粘贴。

此代码受到meteorkitchen 作者@Perak 的强烈启发。我对其进行了调整，但我没有“按原样”对其进行测试。