jquery trim（）。split（）和'exact match'之間的條件語句

Question

我有一個jQuery函數，它檢查輸入字段並將其與列表組進行比較。如果在列表項目中找到字符/單詞，它將僅顯示包含完全匹配的列表項目。我正在使用trim（）。split（）來檢測更多的單詞/短語。

這裏我的代碼：

$('#box').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis == "") { 
    $('.filterlist>li').show(); 
    } else { 
    var subValues = valThis.trim().split(', '); 
    $('.filterlist>li').each(function() { 
     var node = $(this); 
     var text = node.text().toLowerCase(); 
     if (subValues.some(function (word) { 
     return text.indexOf(word) !== -1; 
     })) { 
     node.show(); 
     } 
     else { 
     node.hide(); 
     } 
    }); 
    }; 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input id="box" type="text" placeholder="Search"> 

<ul class="filterlist" style="list-style:none;"> 
    <li>1. red</li> 
    <li>2. blue</li> 
    <li>3. red blue yellow</li> 
    <li>4. blue red yellow</li> 
    <li>5. red yellow</li> 
    <li>6. red green</li> 
</ul> 

這個偉大的工程，如果你輸入「紅，黃」包含任何字的所有項目只顯示包含這些詞，即所有項目將顯示，除了列表項，對於項目'2'，因爲它只有'藍色'。另一方面，如果您輸入「紅色黃色」，由於完全匹配，它只會返回項目「4」和「5」。

但我的問題是，有沒有辦法讓這個功能，但增加的條件下以某種方式，將允許用戶顯示僅包含什麼是輸入，但並不一定是完全匹配的項目？即輸入='紅+黃'>列表：'3'，'4'和'5'或輸入='藍+綠'>未列出。我試過使用選擇器'：contains（）'和'：not（：contains（））'，但是我無法繞過它。

任何幫助將大規模讚賞。

已更新： 現在將輸入值作爲class/s添加到li標籤中。

$('#box').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 

    /* remove split character */ 
    var valClass = valThis.replace(',',''); 

    if (valThis == "") { 
    $('.filterlist>li').show(); 
    } else { 
    var subValues = valThis.trim().split(', '); 
    $('.filterlist>li').each(function() { 
     var node = $(this); 
     var text = node.text().toLowerCase(); 
     if (subValues.some(function (word) { 
     return text.indexOf(word) !== -1; 
     })) { 
     node.show(); 
     $(this).removeClass().addClass(valClass); 
     } 
     else { 
     node.hide(); 
     } 
    }); 
    }; 
}); 

Answer 1

如果你能在li要素類添加搜索值，那麼你可以大量通過選擇類元素簡化你的邏輯。

要做到這一點，只需刪除搜索詞中的空格並用.替換它即可。試試這個：

$('#box').keyup(function() { 
 
    var searchTerm = $(this).val().toLowerCase(); 
 
    if (searchTerm == '') { 
 
    $('.filterlist > li').show(); 
 
    } else { 
 
    try { 
 
     var selector = '.' + searchTerm.replace(/\s+/g, '.'); 
 
     $('.filterlist > li').hide().filter(selector).show(); 
 
    } catch(e) { 
 
     // only to bury the error when a selector is built whilst the user is mid-typing 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="box" type="text" placeholder="Search"> 
 

 
<ul class="filterlist" style="list-style:none;"> 
 
    <li class="red">1. red</li> 
 
    <li class="blue">2. blue</li> 
 
    <li class="red blue yellow">3. red blue yellow</li> 
 
    <li class="blue red yellow">4. blue red yellow</li> 
 
    <li class="red yellow">5. red yellow</li> 
 
    <li class="red green">6. red green</li> 
 
</ul>

注意，try/catch在這裏僅需要停止時SEARCHTERM是在被輸入和生成的選擇是無效的過程中可能會出現的錯誤 - 例如.red,.。如果您將設計更改爲使用按鈕，則可能會刪除該try/catch。

Answer 2

解決方案中的if條件需要更改。

您可以找到改變，並在下面撥弄工作代碼：

https://jsfiddle.net/9vhhvgb3/

的變化是 for(var i=0;i<subValues.length;i++){ if(text.indexOf(subValues[i]) > -1){ nodeToDisplay = true; }else{ nodeToDisplay = false; } } if(nodeToDisplay){ node.show();
} else { node.hide(); }