How do I highlight items on page?

[FancyPrairie]

I have 2 input tags. The first input box contains a name (i.e. John Doe). The second input box is used to search recods for a match. (In this case the record shown already contains a match.) So, for example, suppose I type "Jo" in the 2nd input box. I want to highlight just the characters in the 1st input box that match the characters entered in the 2nd input box. In this case "Jo" would be highlighted but "hn Doe" would not.

Is this possible? If so, how?

 

[ljwilson]

Take a look at jQuery and some of the autocomplete plugins. There are several and many of them work just as you need.

 

[FancyPrairie]

I have spent quite a bit of time looking for a jquery that does it. But can't seem to find one. The ones I have found work on any element that you can wrap a span tag around. But I can't do that with the input tag. The only way I've been able to get it to work is to hide the 1st input box, add a label to the form and set all of the label's properties (styles, innerText, etc) to that of the 1st input box. Kind of a kludge.

Again, I've searched for one but if you found one, please let me know where I can find it.

Thanks

 

[vacunita]

Look into the selectionStart and selectionEnd properties of the textbox.

mytextbox.selectionStart="5";
mytextbox.selectionEnd="7";

This will highlight characters in the textbox from position 5 to 7.

From there you would need to probably find where if at all the text in your second textbox is located within the first.

Using the search function for the string should help you out there.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[FancyPrairie]

I really appreciate you taking the time to look into this problem for me. I'm still fairly new at javascript, so excuse my ignorance. From what I can tell this is server-side code? I'm working with client-side. I have tried a variation of what you suggested using CreateTextRange, etc. But it doesn't quite work.

My sequence of events are:

I enter a character in the 2nd box and then run the code to select the matching characters in the 1st box. Then I must reposition the cursor at the end of the 2nd box so the user can continue typing. However, as soon as I leave the 1st box (i.e. to position the cursor at end of 2nd box) the selected characters are deselected.

Here's my code that selects the text. Note that after the text is selected, the cursor remains after the last character selected. I need the cursor to move back to the end of the 2nd box without deselecting the characters already selected.

function highlight(input, selectionStart, length) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveStart('character', selectionStart);
    range.moveEnd('character', length);
    range.select();
}

 

[vacunita]

No, what I posted is Javascript (Client side).
However I did not realize the selectionStart and SelectionEnd while they return correct values in IE do not create the selection in IE.

The selectionStart and selectionEnd approach work as expected on FF. That is they generate the selection, while maintaining focus on the other textbox, and keeping the cursor at the end of the text in said textbox.

Additionally createTextRange does not work in FF.


In IE the problem lies with the fact that once you make the cursor return to the second textbox, the first one looses focus so the selection is also lost.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.