View Full Version : A XTemplate question...

12 Sep 2008, 11:36 PM
Hi guys.

I'm using a combobox/store for a live search in an application, and basically what I want to do is highlight the search text in the appropriate fields of my XTemplate when it is rendered in the dataView that combobox creates on expand.

For example: Say i'm searching for the name 'wood', and I get a few responses...

Wood, Alan
Wood, Jeff
Kirkwood, Peter
Peterwood, Lils

I'd like the word 'wood' underlined, and also bold when the XTemplate is rendered. My first thought is creating a member function to do this, however, I need to access the search value to match against the record values and that isn't in the scope of the template.

Thanks for any help :)

13 Sep 2008, 12:32 AM
As a first idea, do some string manipulation in an implementation of


Put <span class="combo-match-text> ... </span> round the matched text, and then create the stylesheet rule.

1 Oct 2008, 8:50 PM
It's taken me awhile to finally get around to trying this, but now I have, i've found the following problem:

The matched data has had the tags applied to it to highlight the searched for word, however, the records in the store now have the tags also - i'd prefer not to change the data in the store if possible.

In DataView config:

prepareData: function(data)
for(var prop in data)
data[prop] = this.highlightSearchedWord(this.selectedValue,data[prop]);

return data;
Highlight function:

highlightSearchedWord: function(searchFor, stringToSearch)
var pos = stringToSearch.toLowerCase().indexOf(searchFor.toLowerCase());

// if pos is not -1, a match has been found
var replace = stringToSearch.substring(pos,pos+searchFor.length);
stringToSearch = stringToSearch.replace(replace, '<span style="text-decoration:underline; font-weight:bold;">'+replace+'</span>');

return stringToSearch;
Any suggestions?

1 Oct 2008, 11:27 PM
Yes. Do not modify the data.

Just create the prepared data to return from that function, but leaver the Record unmodified.

2 Oct 2008, 1:29 PM
Okay, the penny just dropped there... sometimes I forget javascript isn't php :P