The Type Ahead valueMarkup option is used when you want to do the entire server-side computation
of what appears in the type ahead dropdown for yourself, by computing the valueList property.
For example:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
Choose a model of car (try 'e' or 'm'):<xp:br></xp:br>
<xp:inputText id="inputText1">
<xp:typeAhead var="startValue" valueMarkup="true">
<xp:this.valueList>
<![CDATA[#{javascript:
var cars = [ "Escape", "Explorer", "Focus" , "Mustang" ,
"Thunderbird" , "Accord" , "Civic" , "Ridgeline" ,
"Mazda 3" , "Mazda 6" , "RX-8" ,
"Thomas The Tank Engine" ];
var prices = [ "30", "55", "35" , "45" ,
"20" , "20" , "35" , "50" ,
"65" , "55" , "25" , "160" ];
var result = "<ul>";
for (i=0; i<12; i++) {
if( cars[i].toLowerCase().startsWith(startValue) ){
result += '<li><span class="informal">Model: </span>'
+ cars[i]
+ '<span class="informal"><p style="color:green">'
+'price: '
+ prices[i]
+ '</p></span></li>';
}
}
return result + "</ul>";
}]]>
</xp:this.valueList>
</xp:typeAhead>
</xp:inputText>
</xp:view>
In your Edit Box, in the Type Ahead tab, check the check box to enable Type Ahead.
In the Outline view, toggle open the Edit Box, select the child Type Ahead control.
In the All Properties tab, set "valueMarkup" to true. Set "var" as the name of
the value entered in the edit box so far. Then go back to the Edit Box, Type Ahead tab,
and compute the Suggestions to appear in the dropdown. The suggestions are saved
in the valueList property.
The valueList property should return a <ul> list, with 0 or more <li> items.
There are no further alterations to the result of the valueList property before it is sent to the browser.
Usually the valueList should filter the set of options to reflect the submitted value from the edit box,
by using the variable defined in the var property.
(Above it reduces the returned results to cars whose model starts with the edit box value,
but you could use this mechanism to do a "contains" check instead of startsWith.)
If you're displaying the results from a database column containing thousands of entries,
you should consider only sending the first few matches to the browser.
Your implementation is responsible for encoding and escaping values as needed.
For example, if using user-provided entries, ensure malicious users can't insert JavaScript tags
to be executed in other users' browsers.
Any style on the <ul> and <li> items are ignored when the result is processed in the browser (issue MKEE7R7JRZ, not fixed in 8.5.1),
but you can style the contents of the <li> items as much as you want;
only the innerText will be inserted into the edit box when an item is selected, so any HTML tags will not be inserted.
The <span class="informal"> mechanism is used to ignore portions of text from the displayed item
when inserting the value into the edit box. In the example above, type "e":
and select the first item. It will insert the text
into the edit box, instead of