搜索与多个搜索条件的李在列表</p> <p>

Question

多个搜索条件我有一个像下面

<ul> 
    <li> 
     <dl class="p_list1"> 
      <dd id="name"> 
       <b>Car</b></dd> 
      <dd id="company"> 
       Honda, Hyundai, Toyota, Suzuki</dd> 
     </dl> 
    </li> 
    <li> 
     <dl class="p_list2"> 
      <dd id="name"> 
       <b>Bike</b></dd> 
      <dd id="company"> 
       Honda, Yamaha, Suzuki</dd> 
     </dl> 
    </li> 
    <li> 
     <dl class="p_list3"> 
      <dd id="name"> 
       <b>Truck</b></dd> 
      <dd id="company"> 
       Tata, Volvo, Mahindra</dd> 
     </dl> 
    </li> 
</ul> 

我使用两个文本框txtName的和txtCompany在此列表中搜索列表。 基于一个文本框的值或两个文本框的值我需要显示和隐藏列表。

1. 如果用户在txtName中搜索如“c”那么它必须显示第1项和第3项。 （txtCompany为空）
2. 如果用户在txtcompany中搜索“Hon”，它必须显示第一个和第二个列表。 （txtName的是空的）
3. 如果txtName的像txtCompany“C”和用户搜索那么它从清单，项目第一和第三搜索

我用下面的jQuery

(
     function ($) { 
      jQuery.expr[':'].Contains = function (a, i, m) { 
       return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
      }; 
      function listFilter(list) { 

       $('#txtName').change(function() { 
        var filter = $(this).val(); if (filter) { $(list).find("dd[id='name']:not(:Contains(" + filter + "))").parent().parent().slideUp(); $(list).find("dd[id='name']:Contains(" + filter + ")").parent().parent().slideDown(); } 
        else 
        { $(list).find("li").slideDown(); } 
        return false; 
       } 
       ).keyup(function() { $(this).change(); }); 


       $('#txtCompany').change(function() { 
        var filter = $(this).val(); if (filter) { $(list).find("dd[id='company']:not(:Contains(" + filter + "))").parent().parent().slideUp(); $(list).find("dd[id='company']:Contains(" + filter + ")").parent().parent().slideDown(); } 
        else 
        { $(list).find("li").slideDown(); } 
        return false; 
       } 
       ).keyup(function() { $(this).change(); }); 


      } 



      $(function() { 
       listFilter($("#list")); 
      } 
      ); 
     } (jQuery)); 

现在问题是当我开始用一个文本框搜索它的工作正常，当我使用两个搜索条件，然后它将开始搜索基于当前文本框按键。 我知道这是因为我写的变化事件文本框和它不考虑其他文本框的值:(

这里的a link to the test I have created

Answer 1

由于你使用的是同一个ID为多个DOM元素遇到问题，这不允许尝试赋予类而不是ID的，如果你想调用相同的jQuery函数到多个DOM元素

我打标问题，您的标记：。

<ul> 
    <li> 
     <dl class="p_list1"> 
      <dd id="name"> <!--OK to have an ID here----> 
       <b>Car</b></dd> 
      <dd id="company"><!--OK to have an ID here----> 
       Honda, Hyundai, Toyota, Suzuki</dd> 
     </dl> 
    </li> 
    <li> 
     <dl class="p_list2"> 
      <dd id="name"><!--ID repeated, jquery function won't run for this event----> 
       <b>Bike</b></dd> 
      <dd id="company"><!--ID repeated, jquery function won't run for this event----> 
       Honda, Yamaha, Suzuki</dd> 
     </dl> 
    </li> 
    <li> 
     <dl class="p_list3"> 
      <dd id="name"><!--ID repeated, jquery function won't run for this event----> 
       <b>Truck</b></dd> 
      <dd id="company"><!--ID repeated, jquery function won't run for this event----> 
       Tata, Volvo, Mahindra</dd> 
     </dl> 
    </li> 
</ul> 

Answer 2

此代码应该诀窍：

编辑：此代码根据这两个条件的OR组合来过滤元素。

(
     function ($) { 
      jQuery.expr[':'].Contains = function (a, i, m) { 
       return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
      }; 
      var nameFilter, companyFilter; //store their values 

      function onConditionChange (nameFilter, companyFilter) { 

        var hideCondition = "dd" + (companyFilter ? "[id='company']:not(:Contains(" + companyFilter + "))" : "") + (nameFilter ? "[id='name']:not(:Contains(" + nameFilter + "))" : ""); 

        if (nameFilter || companyFilter) { 

         $(list).find(hideCondition).parent().parent().slideUp(); 
         if (nameFilter) { 
                $(list).find("dd[id='name']:Contains(" + nameFilter + ")").parent().parent().slideDown(); 
               } 
               if (companyFilter) { 
                 $(list).find("dd[id='company']:Contains(" + companyFilter + ")").parent().parent().slideDown();       
               }       
        } else { 
         $(list).find("li").slideDown(); 
        } 
        return false; 
       }    

      function listFilter(list) { 

       $('#txtName').change(function() { 
        nameFilter = $(this).val(); 
        onConditionChange(nameFilter, companyFilter); 
       } 
       ).keyup(function() { $(this).change(); }); 


       $('#txtCompany').change(function() { 
        companyFilter = $(this).val(); 
        onConditionChange(nameFilter, companyFilter); 
       } 
       ).keyup(function() { $(this).change(); }); 


      } 



      $(function() { 
       listFilter($("#list")); 
      } 
      ); 
     } (jQuery)); 

我分叉的小提琴，所以你可以看到它在行动here

基本上你保持的这两个条件的轨道，并利用它们的过滤器，如果它们不为空（或至少一个不空值）。

我试图强制DRYer版本，重复代码少。但是，它仍然可以改进，但它应该可以解决您的问题。

编辑

阅读评论，here后，它是过滤的元素把两个搜索条件和版本。

(
    function ($) { 
     jQuery.expr[':'].Contains = function (a, i, m) { 
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
     }; 
     var nameFilter, companyFilter; //store their values 

     function onConditionChange (nameFilter, companyFilter) { 

       var showCondition = "dd" + (companyFilter ? "[id='company']:Contains(" + companyFilter + ")" : "") + (nameFilter ? "[id='name']:Contains(" + nameFilter + ")" : ""); 

       if (nameFilter || companyFilter) { 
        if (nameFilter) {       
         $(list).find("dd[id='name']:not(:Contains(" + nameFilter + "))").parent().parent().slideUp(); 
        } 
        if (companyFilter) { 
         $(list).find("dd[id='company']:not(:Contains(" + companyFilter + "))").parent().parent().slideUp();        
        } 

        $(list).find(showCondition).parent().parent().slideDown(); 

       } else { 
        $(list).find("li").slideDown(); 
       } 
       return false; 
      }    

     function listFilter(list) { 

      $('#txtName').change(function() { 
       nameFilter = $(this).val(); 
       onConditionChange(nameFilter, companyFilter); 
      } 
      ).keyup(function() { $(this).change(); }); 


      $('#txtCompany').change(function() { 
       companyFilter = $(this).val(); 
       onConditionChange(nameFilter, companyFilter); 
      } 
      ).keyup(function() { $(this).change(); }); 


     } 



     $(function() { 
      listFilter($("#list")); 
     } 
     ); 
    } (jQuery));