我正在从 O365 REST 调用中填充一个对象,然后使用 SPfx FluentUI 详细信息列表应用程序中的多选下拉菜单进行过滤。我的代码是附加来自每个下拉列表的任何值的结果,而不是缩小结果以满足所有过滤条件。
示例 Codepen:https ://codepen.io/detailcode/pen/VwmdZoo
<!DOCTYPE html><html><body>
<select id="lstTitle" multiple size="4">
<option value="" selected>(Select Multi Values)</option>
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
<option value="Grape">Grape</option>
<option value="Banana">Banana</option>
<option value="Beet">Beet</option>
<option value="Grapefruit">Grapefruit</option>
<option value="Lemon">Lemon</option>
</select>
<select id="lstColor" multiple size="4">
<option value="" selected>(Select Multi Values)</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
</select>
<select id="lstTaste" multiple size="4">
<option value="" selected>(Select Multi Values)</option>
<option value="Sweet">Sweet</option>
<option value="Sour">Sour</option>
<option value="Bitter">Bitter</option>
</select>
<input id="butFilter" type="button" value="Filter" onclick="butFilter_Click()" />
<p>All Results:</p>
<div id="cssResults1" style="padding:3px 10px;border:1px solid #000;">No data</div>
<p>Single Select Result:</p>
<div id="cssResults2" style="padding:3px 10px;border:1px solid #000;">No data</div>
<p>Multi Select Result: (Selecting Apple, Pear, Grape, Red, Green, Sweet, Sour) <strong>Desired result being records 1, 2, 4, 5, 6</strong></p>
<div id="cssResults3" style="padding:3px 10px;border:1px solid #000;">No data</div>
<script>
let data = [
{ 'id': 1, 'title': 'Apple', 'color': 'Red', 'taste': 'Sweet', },
{ 'id': 2, 'title': 'Apple', 'color': 'Green', 'taste': 'Sour', },
{ 'id': 3, 'title': 'Apple', 'color': 'Yellow', 'taste': 'Sweet', },
{ 'id': 4, 'title': 'Pear', 'color': 'Green', 'taste': 'Sweet', },
{ 'id': 5, 'title': 'Grape', 'color': 'Red', 'taste': 'Sweet', },
{ 'id': 6, 'title': 'Grape', 'color': 'Green', 'taste': 'Sour', },
{ 'id': 7, 'title': 'Banana', 'color': 'Yellow', 'taste': 'Sweet', },
{ 'id': 8, 'title': 'Beet', 'color': 'Red', 'taste': 'Bitter', },
{ 'id': 9, 'title': 'Grapefruit', 'color': 'Yellow', 'taste': 'Bitter', },
{ 'id': 10, 'title': 'Lemon', 'color': 'Yellow', 'taste': 'Sour', },
]
//var result1 = data.filter(e => e.color == 'Yellow' && e.taste == 'Sweet');
console.log(data);
document.getElementById("cssResults1").innerHTML = "<p>" + JSON.stringify(data) + "<p>";
function butFilter_Click() {
var result2 = data.filter(e =>
e.title == (document.getElementById("lstTitle").value != "" ? document.getElementById("lstTitle").value : e.title) &&
e.color == (document.getElementById("lstColor").value != "" ? document.getElementById("lstColor").value : e.color) &&
e.taste == (document.getElementById("lstTaste").value != "" ? document.getElementById("lstTaste").value : e.taste));
document.getElementById("cssResults2").innerHTML = "<p>" + JSON.stringify(result2) + "<p>";
console.log(result2); // LOG SINGLE SELECT RESULT
const valTitle = Array.apply(null, document.getElementById("lstTitle").options).filter(option => option.selected).map(option => option.value);
const valColor = Array.apply(null, document.getElementById("lstColor").options).filter(option => option.selected).map(option => option.value);
const valTaste = Array.apply(null, document.getElementById("lstTaste").options).filter(option => option.selected).map(option => option.value);
console.log(valTitle); // LOG lstTitle MULTI VALUES
console.log(valColor); // LOG lstColor MULTI VALUES
console.log(valTaste); // LOG lstTaste MULTI VALUES
// INCLUSIVELY ADDS TO RESULT VERSUS MATCHING ALL KEY VALUES
let tempContat = [];
let temp;
for(var i = 0; i < valTitle.length; i++) {
temp = data.filter(e => e.title == (valTitle[i] != "" ? valTitle[i] : e.title))
tempContat = tempContat.concat(temp);
}
for(var i = 0; i < valColor.length; i++) {
temp = data.filter(e => e.color == (valColor[i] != "" ? valColor[i] : e.color))
tempContat = tempContat.concat(temp);
}
for(var i = 0; i < valTaste.length; i++) {
temp = data.filter(e => e.taste == (valTaste[i] != "" ? valTaste[i] : e.taste))
tempContat = tempContat.concat(temp);
}
var result3 = tempContat;
document.getElementById("cssResults3").innerHTML = "<p>" + JSON.stringify(result3) + "<p>";
console.log(result3); // LOG MULTI SELECT RESULT
}
</script>
</body></html>
更新:如何过滤对象以在最终结果中包含(与结果3相反)?选择水果(苹果、梨、葡萄)、颜色(红色、绿色)和口味(甜、酸)时,预期结果应为 ID 1、2、4、5 和 6。如果每个搜索条件不符合,它应该像在搜索引擎过滤器中一样被排除。