keyup 功能突出显示正在输入的值

Posted 2023-05-08

【中文标题】keyup 功能突出显示正在输入的值

【英文标题】：keyup function highlighting value being inputed

【发布时间】：2019-12-22 07:01:54

【问题描述】：

在下面的 sn-p 中，当用户开始在输入字段中输入时，结果开始过滤。

现在我正在捕捉价值。当用户键入和擦除时，我想在跨度类周围附加值。这样我可以在输入时突出显示结果。

这是我目前所拥有的，使用追加路由是最好的方法吗？

这是我创建的 jsFiddle 的链接：https://jsfiddle.net/uvcLfed6/1/

$('#myInput').keyup(function() 
    var value = $(this).val().toLowerCase();
    //console.log('Value: ' + value);
    $(value).addClass("highlight");
    //$(value).css("background-color", "pink");
    $("#myDiv *").filter(function() 
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    );
);

.highlight 
    background-color: #FFFF33; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

```
<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div id="myDiv">

  <div>
<h2>Title Here</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p>
<p>Some text Here</p>
  </div>

  <div>
Aenean commodo ligula eget dolor. Aenean massa.
<pre>
    This is some some text here
    pre tag here with content <br> Hi
</pre>
  </div>

  <div>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>

  <div>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  </div>

</div>
```

【问题讨论】：

编辑上面的sn-p :)

我现在就创建一个.. 感谢您的建议！

jsfiddle.net/uvcLfed6/1

【参考方案1】：

使用 .each ，.replace() 您可以实现这一目标

$('#myInput').on('input',function() 
    var value = $(this).val();
    
    // show / hide divs which contains the value
    // .hide() to hide all divs then .filter() to filter the divs contains the value then .show() it
    /*$("#myDiv > div").hide().filter(function() 
        return $(this).text().indexOf(value) > -1;
    ).show();*/
    
    // replace the string with `<span>`
    $("#myDiv > div").each(function()     // loop through divs
        if($(this).text().indexOf(value) > -1) // if this div contains value
          $(this).html($(this).text().replace(new RegExp(value , "g"), '<span class="highlight">'+value+'</span>'));  // wrap the value in highlight span then change the div `html` with the new value
          $(this).show();  // show the div
        else  // if not contains the value
          $(this).html($(this).text()); // return the div html to the text without spans
          $(this).hide(); // hide the div
        
    );
);

.highlight 
    background-color: #FFFF33; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div id="myDiv">

  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </div>

  <div>
    Aenean commodo ligula eget dolor. Aenean massa.
  </div>

  <div>
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>

  <div>
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  </div>

</div>

$('#myInput').on('input',function() 
    var value = $(this).val().trim();
    
    $("#myDiv *").each(function()
      var IsNested = !$(this).hasClass('toggle');
      if(IsNested === true)
        var reg = new RegExp(value , 'g');
        if($(this).text().indexOf(value) > -1)
          $(this).html($(this).text().replace(reg , '<span class="highlight">'+ value +'</span>'));
        else
          $(this).html($(this).html().replace('<span class="highlight">' , '').replace('</span>' , ''));
        
       else
        
       
    );
);

.highlight 
    background-color: #FFFF33; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div id="myDiv">

  <div class="toggle">
<h2>Title Here</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p>
<p>Some text Here</p>
  </div>

  <div class="toggle">
Aenean commodo ligula eget dolor. Aenean massa.
<pre>
    This is some some text here
    pre tag here with content <br> Hi
</pre>
  </div>

  <div class="toggle">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>

  <div class="toggle">
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  </div>

</div>

【讨论】：

你可能想用正则表达式替换所有

谢谢！！我确实有一个问题，myDiv 中的一些内容包含在pre 标记中。使用这种方法，它会破坏 pre 标记的结构，删除所有 br 元素。知道是什么原因造成的吗？

@hisusu32 我的代码适用于#mydiv 内的直接 div，当删除该值时，它会使用 div 文本更改整个 div html 以删除任何突出显示的跨度，这就是为什么 div 中的任何标签都有已被删除.. 最好用确切的情况编辑 sn-p 以获得正确的答案

检查一下，看起来所有元素都失去了它们的属性。我可能应该改用一些实际的内容，对此感到抱歉。

【参考方案2】：

您可以通过简单地将内部 html 作为字符串并将所有找到的结果替换为包装的 span 来实现。这样，您也可以保留html结构。

// save structure before use
var original = $("#myDiv").html();

// bind event
$('#myInput').keyup(function() 
  // get search value
  var value = $(this).val();

  // replace with original
  $("#myDiv").html(original);

  if (!value) 
    // if empty
    return;
  

  // filter
  $("#myDiv *").filter(function() 
    return $(this).text().indexOf(value) > -1;
  ).each(function() 
  // wrap search term in span 
    $(this).html($(this).html().replace(value, "<span class='highlight'>" + value + "</span>"));
  );
);

.highlight 
  background-color: #FFFF33;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div id="myDiv">

  <div>
    <h2>Title Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      <p>
        <p>Some text Here</p>
  </div>

  <div>
    Aenean commodo ligula eget dolor. Aenean massa.
    <pre>
            This is some some text here
            pre tag here with content <br> Hi
        </pre>
  </div>

  <div>
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>

  <div>
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  </div>

</div>

【讨论】：

谢谢你的工作就像一个魅力！有没有办法让它过滤并只显示带有结果的div？和原来的代码一样吗？谢谢

@hisusu32 是的。在突出显示逻辑之前，只需添加一个类就可以了。