TextArea + enable hightlighting and selection

I've got the above textarea being populated by jquery keyup, ajax, php and mysql. I now need to be able to allow a mouse over affect when the line with the mouseover will be highlighted, cursor:pointer and be able to select one and have it appear in the above input.

I'm not sure how to even start this part. Can someone give me a push in the right direction?

thankyou

Answers

It's much better and easier to convert that textarea to a list and convert each line of text to a text box as list items:

var text = $('#text').html().split('\n');
var list = $('<ul></ul>');
$.each(text, function(k, v) {
    if (v != '') {
        $('<li>' + '<input type="text" id="' + k + '" value="' + v + '" />').appendTo(list);
    }
});
$('#text').replaceWith(list);

see this example.

then:

register an event handler for mousemove() on the list element and use target to get hovered item:

$('#listElement').mousemove(function(e) {
    $('#textBoxElement).val($(e.target).val());
});

see this demo.

and finally put them together.

Need Your Help