使用文本框过滤和搜索 [英] Filter and search using Textbox

问题描述

此问题是对我的上一个问题的跟进在过滤DropdownList上

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

I am adding an extra feature and for that I want to Filter values using a textbox. Here is the code for filter

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事件

and this is the keyup event i am doing on the search textbox

"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中消失所有列表.请帮助

With this i am able to return total collection objects on each keypress in the console but it is not filtering the values in the listing and it vanishies all the listings from the UI. Please help

推荐答案

您几乎是正确的.您的keyUp事件可以，但是您也可以避免使用jQuery，如下所示:

You are almost right. Your keyUp event is ok but you could also avoid to use jQuery like this:

"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仅搜索城市，则可能会有点过头了)，我会使用一个开关

Note that I use a switch in case you would want to add shortcuts for specific searches, like cmd+maj+c to search only for cities (it might be a little overkill)

关于搜索功能，我假设您想在当前的下拉过滤器中搜索商品的标题. 然后，您需要添加一个额外的步骤来执行此操作.您还需要在其他过滤器之前进行设置.请参阅下面的示例，将其插入var filtered = [];之后:

Concerning the search function, I assume you want to search among the titles of your items, within the current dropdown filtering. You then need to add an extra step to do this. You also need to set it before the other filters. See my example below, you insert it after 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;

此外，请花点时间了解代码的作用，您绝不能只是复制粘贴代码.

Also, take the time to understand what the code does, you must not just copy paste it.

此代码受 meteorkitchen 作者

This code is strongly inspired by the work of meteorkitchen author, @Perak. I adapted it but I have not tested it "as-is".

这篇关于使用文本框过滤和搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！