我設法解決了這個問題https://user-images.githubusercontent.com/26569942/56949597-f8f6f280-6b50-11e9-8521-bfd1235126d9.gif。我現在可以不考慮詞序進行搜索，但搜索過濾器顯示大量結果，而且并不像我希望的那么嚴格。我在下面發布了一個可運行的代碼片段，以更好地演示我的問題。如果您在搜索欄中輸入“Correy”，它將正確顯示包含“Correy”一詞的所有結果。但是，如果我想搜索特定的 Correy ，我將無法做到。例如，在搜索欄中輸入“Correy Adele”。它仍然會像以前一樣顯示所有 Corey 結果。我不希望這種事發生。有什么建議 ？function myFunction() {var filter = $('input').val().toUpperCase().split(' ');var li = $('li');var a = $('a');var ul;var txtValue;ul = document.getElementById("myUL");for (var i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; for(var f = 0; f < filter.length; f++) { if (txtValue.toUpperCase().indexOf(filter[f]) > -1 ) { li[i].style.display = ''; // don't need further matches } else { li[i].style.display = 'none'; } break; }}}<style>* { box-sizing: border-box;}#myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px;}#myUL { list-style-type: none; padding: 0; margin: 0;}#myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block}#myUL li a:hover:not(.header) { background-color: #eee;}</style>
1 回答
慕的地6264312
TA貢獻1817條經驗 獲得超6個贊
您可以采用另一個變量并將其設置為true并迭代過濾詞并在最后關閉不需要的項目。
match = true;
for (var f = 0; f < filter.length && match; f++) { // exit loop if not match
match = txtValue.includes(filter[f]);
}
li[i].style.display = match ? '' : 'none';
function myFunction() {
var filter = $('input').val().toUpperCase().split(/\s+/);
var li = $('li');
var a = $('a');
var ul;
var txtValue;
ul = document.getElementById("myUL");
var match
for (var i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = (a.textContent || a.innerText).toUpperCase();
match = true;
for (var f = 0; f < filter.length && match; f++) {
match = txtValue.includes(filter[f]);
}
li[i].style.display = match ? '' : 'none';
}
}
<style>* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Adele Correy</a></li>
<li><a href="#">Agnes Green</a></li>
<li><a href="#">Billy Correy</a></li>
<li><a href="#">Bob Green</a></li>
<li><a href="#">Calvin Green</a></li>
<li><a href="#">Christina Correy</a></li>
<li><a href="#">Cindy Correy</a></li>
</ul>
- 1 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消