Filter and search using Textbox

Question

This question is a follow-up of My Previous Question on Filtering 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;
};

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));
     }
   }

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

Answer 1

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);
    }
}

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)

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.

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