根据下拉列表过滤记录 [英] Filtering records according to dropdownlist

问题描述

我需要根据下拉列表中的选择来过滤列表或记录. 我有三个下拉菜单，它们需要相互协作以反应方式过滤记录.也就是说，在一个下拉列表中选择值应过滤其他下拉列表值影响的记录.

I need to filter the listing or records according to selection in dropdownlists. I have three dropdowns that needs to filter the records reactively in collaboration with each other. i.e value selection in one dropdownlist should filter the records effected by other dropdownlist values.

var filterAndLimitResults = function (cursor) {

    if (!cursor) {
        return [];
    }

    var raw = cursor.fetch();

    var currentChosenCategory = chosenCategory.get();
    var currentChosenCity = chosenCity.get();
    var currentJtype = chosenJtype.get();

    console.log(currentChosenCategory);
    console.log(currentChosenCity);
    // filter category
    var filtered = [];
    if (!currentChosenCategory || currentChosenCategory == "" && !currentChosenCity || currentChosenCity == "" && !currentJtype || currentJtype == "")
    {
        filtered = raw;
      //  console.log(filtered);
    }
    else {

        filtered = _.filter(raw, function (item) {
          if(currentChosenCategory){
            return item.ccategory === currentChosenCategory ;
          }
          if(currentChosenCity){
            return item.city === currentChosenCity ;
            console.log(item.city === currentChosenCity);
          }
        });
      }

var currentLimit =limit.get();
//enforce the limit
if (currentLimit ) {
    filtered = _.first(filtered, currentLimit );
}
return filtered;
};

上面的代码同时过滤下拉列表和限制记录数，以便进行无限滚动.

the above code is doing both filtering the dropdowns and limit the number of records so as to give infinite scrolling.

编辑基于文本的搜索

这是我的搜索框事件图

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

这是我在filteredAndLimitResults

if(!(!currentSearchTitle || currentSearchTitle == "")) {
      filtered = _.filter(filtered, function (item) {
              return item.title === currentSearchTitle ;
              console.log(item.title === currentSearchTitle);
      });
    }

当我在搜索框中输入内容时.所有记录都消失了，按esc时它又回到了原来的状态.在console.log中，我可以看到每次按一个键都会返回该集合.

when i am typing something in the search box. all the records vanishes and when in press esc it comes back to as it was. in console.log i can see that on everytime i press a key it returns the collection.

推荐答案

您需要一个接一个地执行过滤器.尝试这样:

You need to enforce the filters one after the other. Try like that:

var filterAndLimitResults = function (cursor) {

    if (!cursor) {
        return [];
    }

    var raw = cursor.fetch();

    var currentChosenCategory = chosenCategory.get();
    var currentChosenCity = chosenCity.get();
    var currentJtype = chosenJtype.get();

    console.log(currentChosenCategory);
    console.log(currentChosenCity);
    // filter category
    var filtered = [];
    if (!currentChosenCategory || currentChosenCategory == "" || currentChosenCategory === "All categories")
    {
        filtered = raw;
        //  console.log(filtered);
    }
    else {
        filtered = _.filter(raw, function (item) {
            if(currentChosenCategory){
                return item.ccategory === currentChosenCategory ;
            }
        });
    }
    // filter city
    if (!(!currentChosenCity || currentChosenCity == "" || currentChosenCity === "All cities"))
 {
        filtered = _.filter(filtered, function (item) {
            if(currentChosenCity){
                return item.city === currentChosenCity ;
                console.log(item.city === currentChosenCity);
            }
        });
    }
    // filter JType
    if (!(!currentJtype || currentJtype == "" || currentJtype === "All Jtypes"))
 {
        filtered = _.filter(filtered, function (item) {
            if(currentJtype){
                //update the item.ccategory with the right field
                return item.ccategory === currentJtype ;
            }
        });
    }
    var currentLimit =limit.get();
    //enforce the limit
    if (currentLimit ) {
        filtered = _.first(filtered, currentLimit );
    }
    return filtered;
};

这篇关于根据下拉列表过滤记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！