突出显示在网页的搜索框中输入的关键字答案

【问题标题】：Highlighting a keyword which is entered in a search box in a webpage突出显示在网页的搜索框中输入的关键字
【发布时间】：2017-09-16 22:03:04
【问题描述】：

我用过这个：

$('#srch').click(function(){
  var s='';
  s = $('#gt').val();
  if (s == '')
  {
    $("p") .addClass("default");
  } else {
    $("p:contains('"+ s +"')") .addClass("active");
  }
});

它可以工作，但它会继续存储以前的数据。我想清除以前的数据。

【问题讨论】：

标签： jquery html

【解决方案1】：

使用removeClass()去除高亮的元素类

$('#srch').click(function(){
$("p").removeClass("active"); 
...
}

【讨论】：

【解决方案2】：

要在搜索后清除输入，只需使用$(...).val(''):

$('#srch').click(function(){
    var s='';   
    s = $('#gt').val();
    $('#gt').val('');
    if (s == ''){       
        $("p") .addClass("default");    
    } else{
        $("p:contains('"+ s +"')") .addClass("active"); 
    }
});

【讨论】：

【解决方案3】：

检查一下

 $('#srch').on("click",function(){
    var s = $('#gt').val();
    $("p").removeClass("active")
    if (s == ''){       
        $("p").addClass("default");    
    } else{
        $("p:contains('"+ s +"')").addClass("active"); 
    }
});

Working Fiddle Demo

【讨论】：

谢谢！有效。但它不适用于在线服务器。该怎么做？
发给我在线链接，我会查的
我不能！实际上该站点不完整，处于测试阶段。所以现在不能透露。

【解决方案4】：

使用ternary operator，您可以在一行中执行此操作。

$('#srch').click(function(){
    $("p") .removeClass("active") ;
    var s='';   
    s = $('#gt').val();
    s == ''?  $("p") .addClass("default")  : $("p:contains('"+ s +"')") .addClass("active"); 
});

.default {
  background: green;
}
.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a test contain</p>
<input type='text' id='gt'/>
<input type='button' id='srch'>

【讨论】：