CODEWITHSUNDEEP
javascriptjquery
user957178
user957178

Reputation: 631

Highlight the text using jquery

I have one textbox, button and and list box with some text.

When I click on button what ever the text I enter in text if it matches the text in the list box I am trying to highlight that text using jquery I used this code.

Jquery Code

$("#btnhighlight").click(function () {
    alert("yes");
    var htext = $("#txthighlighttext").val();
    alert(htext);
    $("#lstCodelist").highlight('MD');
});

Style sheet I used to hightlight and i downloaded the highlight plug in added to the project

<style type="text/css">
    .highlight { background-color: yellow }
</style>

Please can any one help me out how to do this. or if I am doing wrong? Can an

Upvotes: 1

Views: 573

Answers (2)

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

This plugin is generating spans around the text it finds. Option tags can not contain any html tags so the following (Generated by your plugin)

<select>
   <option><span class="highlight">Te</span>st</option>
</select>

is illegal syntax and will be ignored by the browser.

However if I understand your intent, there are some plugins out there that will accomplish something similar for you out of the box.

http://code.drewwilson.com/entry/autosuggest-jquery-plugin

Some proof that a nested span inside an option is not allowed.

Upvotes: 0

sirLisko
sirLisko

Reputation: 1494

Maybe your problem is that your script is executed before DOM ready.

try with this:

$(function (){
    $("#btnhighlight").click(function () {
        var htext = $("#txthighlighttext").text();
        $('#lstCodelist').highlight(htext);
    });
});

or put your script at the body end.

ps. I supposed you used this plugin (jquery.highlight)

edit: http://jsfiddle.net/yJmBu/ here a full example

Upvotes: 2

Related Questions