使用jQuery突出显示Chrome等搜索词
我最近用jQuery和一个高亮插件做了一个非常简单的突出显示。 它看起来像这样：
$（’myButton’）。click（function（）{
$（ ‘身体’）突出（$（ ‘＃myInputText’）VAL（））;
}）;
但是我想知道我怎么能像Chrome一样突出显示，我的意思是每当我在文本框中输入一些字母而不提交时突出显示这些字母。 我想也许可以使用一个keyup事件……任何想法？
谢谢Andy，我在你的代码中将’this [0]’更改为’search [i]’，如果只有一个’p’标签，它就有效
$(document).ready(function(){ var search = ['p', 'div', 'span']; $("#highlighter").bind('keyup', function(e){ var pattern = $(this).val(); $.each(search, function(i){ var str = search[i]; var orgText = $(str).text(); orgText = orgText.replace(pattern, function($1){ return "" + $1 + "" }); $(str).html(orgText); }); }); }); 我做了快速的代言，代码：
$(document).ready(function(){ var search = ['p', 'div', 'span']; $("#highlighter").bind('keyup', function(e){ var pattern = $(this).val(); $.each(search, function(i){ var str = this[0]; var orgText = $(str).text(); orgText = orgText.replace(pattern, function($1){ return "" + $1 + "" }); $(str).html(orgText); }); }); });
链接： http ： //jsbin.com/amica3/edit
$('#myInputText').keypress(function(e) { switch (e.keyCode) { case 13: // "Enter" was pressed; handle it if you want return false; case 27: // ESC was pressed; handle it if you want return false; } $('body').highlight($(this).val()); });
我编辑了JAndy的代码，因此结果将匹配文本中的所有出现，搜索不会区分大小写。 链接希望有人发现这有用