Highlighting search words like Chrome with jQuery
I have recently done a very simple highlighting with jQuery and a highlight plugin. It looks like this:
$('myButton').click(function() {
$('body').highlight($('#myInputText').val());
});
But I wonder how can I do the Chrome like highlighting, I mean highlight the letters whenever I type in some letter in textbox without submitting. I think maybe use a keyup event... Any ideas?
Thanks An开发者_开发知识库dy, i changed 'this[0]' to 'search[i]' in your code and it works if there is only one 'p' tag
$(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 "<span style='background-color: red;'>" + $1 + "</span>"
});
$(str).html(orgText);
});
});
});
I made quick excersise out of it, code:
$(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 "<span style='background-color: red;'>" + $1 + "</span>"
});
$(str).html(orgText);
});
});
});
link: 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());
});
I've edited JAndy's code so the result would match all the occurences in the text and the search would not be case-sensitive. Link Hope someone finds this helpful
精彩评论