我已經實作了一個搜索功能，如果我們通過鍵入來搜索關鍵字，它就可以作業。
<input type="text" class="txtInput" id="searchTheKey" placeholder="Enter the keywords to search.....">
</label>
<ul id="matchKey">
<li id="subjectName">JavaScript</li>
<li id="teacherName"><a href="#">John Smith</a></li>
<li id="subjectName">Java</li>
<li id="teacherName"><a href="#">David Miller</a</li>
<li id="subjectName">MongoDB</li>
<li id="teacherName"><a href="#">Carol Taylor</a></li>
</ul>
<script>
$("#searchTheKey").on('keyup', function(){
var value = $(this).val().toLowerCase();
$("#matchKey li").each(function () {
if ($(this).text().toLowerCase().search(value) > -1) {
$(this).show();
$(this).prev('.subjectName').last().show();
} else {
$(this).hide();
}
});
})
</script>
但是在輸入框中直接賦值的情況下，搜索功能就不起作用了。
示例：$(".txtInput").val("MongoDB"); 有什么辦法可以解決這個問題，這在這兩種情況下都應該有效。
uj5u.com熱心網友回復：
您可以添加.trigger("keyup")到您的$(".txtInput").val("MongoDB")
演示
顯示代碼片段
$("#searchTheKey").on('keyup', function() {
var value = $(this).val().toLowerCase();
$("#matchKey li").each(function() {
if ($(this).text().toLowerCase().search(value) > -1) {
$(this).show();
$(this).prev('.subjectName').last().show();
} else {
$(this).hide();
}
});
})
$(".mongo").click(function() {
$(".txtInput").val("MongoDB").trigger("keyup")
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="txtInput" id="searchTheKey" placeholder="Enter the keywords to search.....">
<ul id="matchKey">
<li id="subjectName">JavaScript</li>
<li id="teacherName"><a href="#">John Smith</a></li>
<li id="subjectName">Java</li>
<li id="teacherName"><a href="#">David Miller</a></li>
<li id="subjectName">MongoDB</li>
<li id="teacherName"><a href="#">Carol Taylor</a></li>
</ul>
<button class="mongo">search for mongo</button>uj5u.com熱心網友回復：
相關片段：
$("#searchTheKey").on('keyup', function(){
您將函式系結在 keyup 上，這樣它就不會執行，因為以編程方式更改輸入值不會觸發 keyup 事件。
最簡單的方法是.trigger('keyup')在更改輸入值時使用，如 Carsten 建議的那樣。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410628.html
標籤：
上一篇：如何使子div比可滾動父級更寬
下一篇：表單選擇不發送資料