Using

xTypeAheadify is built specifically for the IBM XPages development environment and will not work in a stand alone format in a non-XPage environment.

To use the plugin you have to create an XPage with a working typeAhead field on it. The following code is then added to the page through the onClientLoad even of the XPage.

<xp:eventHandler event="onClientLoad" submit="false">
	<xp:this.script><![CDATA[
		$("INPUT[id$='inputText1']").xTypeAheadify().css('color', 'blue')	
	]]>
</xp:this.script>

The following parameters can be added to the plugin to modify the default values

• continueAfterFail: boolean //determines if the user is allowed to continue to type after no results are returned
• failIcon: string //path to 16*16 icon depicting a "fail"
• waitingIcon : string //path to 16*16 icon depicting a "waiting"
• visualTimeout : number in ms //time before the waiting/fail icon is removed from display
• toolTipMsg : string //Text msg shown if no results are returned - blank does not show anything
• toolTipPosition : //Position of tooltip around the field ("above", "below", "after", "before")

The following code is necessary to add the plugin capability to all typeAhead fields on the page

<script>
	//This runs BEFORE the onLoad and before the dojo changes all the HTML
	//because we are getting ALL typeAheads then we need to set a flag to easily tag off
	//in this case the .iAmTypeAhead
	$("[dojoType$='TypeAhead']").addClass('getTypeAhead')
</script>

<xp:eventHandler event="onClientLoad" submit="false">
	<xp:this.script>
		<![CDATA[
		$(".getTypeAhead INPUT[role='textbox']").xTypeAheadify({
			continueAfterFail: false,
			failIcon: 'Stop.png',
			waitingIcon : "loading.gif",
			visualTimeout : 5000, 
			toolTipMsg : "You must select from the displayed list",
			toolTipPosition : "['above', 'after']" //"above", "below", "after", "before"
		})
		]]>
	</xp:this.script>
</xp:eventHandler>