拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 如果我们直接赋值而不输入,有什么方法可以使用这个关键字搜索功能

如果我们直接赋值而不输入,有什么方法可以使用这个关键字搜索功能

白鹭 - 2022-03-08 2110 0 0

我已经实作了一个搜索功能,如果我们通过键入来搜索关键字,它就可以作业。

<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 建议的那样。

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *