个人中心
gpt4 book ai didi

javascript - 如何通过输入实时高亮文本？

转载 作者：行者123 更新时间：2023-11-30 11:12:38 25 4
gpt4 key购买 nike

我正在尝试使用 JQuery 或 Javascript 实时突出显示文本。当前代码不想从 .filters-no-actions block 中搜索。

它应该是什么样子:

enter image description here

注意:我不想向 .filters-no-actions block 中添加新文本，而是仅使用输入值在此 block 中查找文本并突出显示它们。

CSS

.highlight_y {
  background-color: yellow;
}
p, div {
 display: inline-block;
}

HTML

<input id="ue__searchInput" placeholder="Search">

<div class="filters-no-actions">
  <p>Example text to search</p>
  <p>Lorem ipsum and...</p>
</div>

脚本

$(document).ready(function(){

  var search_input = $('#ue__searchInput');
  $(search_input).change(function(){
    var search_box = $('.filters-no-actions').text();
    var search_box_val = search_box.val();
    if (search_box_val == this.val()) {
      search_box.append('<div class="highlight_y">' + search_box_val + '</div>');
    }
  });

});

最佳答案

您需要使用 keyup 事件而不是 change 事件。方法如下:

$(document).ready(function(){

      var search_input = $('#ue__searchInput');
      $(document).on('keyup', '#ue__searchInput',function(){
        var search_box = $('.filters-no-actions').text();
        var search_box_val = search_input.val();
        if (search_input.val() != '') {
          $('.highlight_y').html('<p class="highlight_text">' + search_input.val() + '</p>');
        }
        else
        {
          $('.highlight_y').html('');
        }
      });

    });
.highlight_y {
  background-color: yellow;
}
p, div {
 display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>

</head>

<body>

    
 <input id="ue__searchInput" placeholder="Search">
 <div class="highlight_y"></div>
  <div class="filters-no-actions">
    <p>Example text to search</p>
    <p>Lorem ipsum and...</p>
  </div>


</body>

</html>

关于javascript - 如何通过输入实时高亮文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53024197/

25 4 0
文章推荐： swift - 当用户在 swift 中按下图像时如何创建消息框？
文章推荐： java - OkHttp 2.0 手动验证正在使用的密码套件
文章推荐： swift - 为什么从 url 下载图像返回 nil？
文章推荐： java - C3P0 的多个数据源