that’s how it looks:
field with type ahead waiting for input: 
field with type ahead thinking 
field with type ahead failure 
this is the XML code of the field for the events:
<xp:eventHandler event=”onkeypress” submit=”false” id=”eventHandler2″>
<xp:this.script><![CDATA[if (event.keyCode==9 || event.keyCode==13){
removeVisual(‘view:_id1:inputText3’)
}else{
addVisual(‘view:_id1:inputText3’);
}]]></xp:this.script>
</xp:eventHandler>
<xp:eventHandler event=”onblur” submit=”false” id=”eventHandler3″>
<xp:this.script><![CDATA[removeVisual(‘view:_id1:inputText3’)]]></xp:this.script>
</xp:eventHandler>
and this is the style assigned to the field:
<xp:this.styleClass>
<![CDATA[#{javascript:if( currentDocument.isEditable()){ return ‘useTypeAhead’; }}]]>
</xp:this.styleClass>
this is needed in the CSS:
.useTypeAhead{
background: #fff url(“TypeAhead.gif”) no-repeat right;
}
.dijitValidationContainer{
width: 20px;
}
.dijitValidationContainer .dijitValidationIcon{
width: 20px;
}
this is needed in a CSJS library (cudos to Mark Roden and Sven Hasselbach)
function x$(idTag, param, jd){ //Updated 28 Feb 2012
// hardcoded
idTag=idTag.replace(/:/gi, “\:”)+(param ? param : “”);
return( jd==”d” ? “#”+idTag : $(“#”+idTag));
}
var inputField;
//addVisual function used to add a loading image to the screen and make it visible
//expected input string similar to view1_:id1_:viewPanel1
function addVisual(idTag){
var newImage=”url(‘loading.gif’)” //Change me for your server
inputField=dojo.query(x$(“widget_”+idTag, ” .dijitValidationIcon”, “d”))
inputField.style(“backgroundImage”, newImage);
inputField.style(“visibility”, “visible”);
inputField.style(“backgroundRepeat”, “no-repeat”);
inputField.style(“backgroundPosition”, “right”);
dojo.query(x$(“widget_”+idTag, ” .dijitValidationContainer”, “d”)).style(“display”, “block”)
inputField.attr(“value”,””)
}
//— hijack dojo XHR calls
//Thanks to Sven Hasselbach for this ajax intercept code
//
var typeAheadLoad;
dojo.addOnLoad( function(){
/*** hijacking xhr request ***/
if( !dojo._xhr )
dojo._xhr = dojo.xhr;
dojo.xhr = function(){
try{
var args = arguments[1];
if( args[‘content’] ){
var content = args[‘content’];
if( content[‘$$ajaxmode’] ){
if( content[‘$$ajaxmode’] == “typeahead” ){
/*** hook in load function ***/
typeAheadLoad = args[“load”];
/*** overwrite error function ***/
// args[“error”] = function(){
// alert(‘Error raised!’)
// };
/*** hijack load function ***/
args[“load”] = function(arguments){
/*** On Start ***/
// alert(“On Start!”);
/*** call original function ***/
typeAheadLoad(arguments);
/*** On Complete ***/
if (arguments.toLowerCase()==”<ul></ul>”){
var newImage=”url(‘typeAheadFailure.gif’)” //Change me for your server
inputField.style(“backgroundImage”, newImage)
}else{
inputField.style(“background”, “white”)
}
};
}
}
}
}catch(e){}
dojo._xhr( arguments[0], arguments[1], arguments[2] );
}
});
//removeVisual function used to remove the loading image from the screen and make it hidden
//expected input string similar to view1_:id1_:viewPanel1
function removeVisual(idTag){
var inputField=dojo.query(x$(“widget_”+idTag, ” .dijitValidationIcon”, “d”))
inputField.style(“backgroundImage”, “”)
inputField.style(“visibility”, “hidden”)
dojo.query(x$(“widget_”+idTag, ” .dijitValidationContainer”, “d”)).style(“display”, “none”)
}
//Checks to see if the visual icon is still running – if so then assume fail and kill it
function checkTimer(idTag){
dojo.query(x$(“widget_”+idTag, ” .dijitValidationContainer”, “d”)).style(“display”, “none”)
}