Bolden Matched Search Text
I'm writing a custom control which includes a text box input and an unordered list of items below it. As the user types in the text box I would like for the matched text in the list to be b开发者_高级运维olded (wrapped in <strong>
tags).
//I use keyup so the value takes in to account the last keystroke.
$('#filterList').keyup(function() {
var $this = $(this);
//Clears the last function
clearTimeout($this.data('timer'));
//Runs the function after 400ms if no other keystrokes have taken place
$this.data('timer', setTimeout(function() {
var searchString = $this.val();
$('li').each(function() {
//Remove old strong tags.
$(this).find('strong').replaceWith(function() {
return $(this).html();
});
//Here lies the issue... its close, but not quite there.
$(this).html($(this).html().replace(new RegExp(searchString, "ig"), '<strong>'+searchString+'</strong>'));
});
}, 400));
});
The problem I am having is I want the search to be case insensitive. I was able to match the text appropriately but replacing it and keeping the original casing is becoming a challenge. Also, I don't know how I feel about creating a regular expression out of a user's input.
Suggestions please! Thank you in advance!
Consider using the jQuery Highlight Plugin, you should be up and running in a few minutes.
As for replacing, you can use '<strong>$&</strong>'
- $&
will add the full text the regex matched. In this case, this is what you're looking for. Working example: http://jsfiddle.net/kobi/cKVPY/
精彩评论