Using - markyroden/xTypeAheadify GitHub Wiki

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. The default images utilized by the plugin are available with this repository.

<xp:eventHandler event="onClientLoad" submit="false">
	<xp:this.script><![CDATA[
		$("INPUT[id$='inputText1']").xTypeAheadify()	
	]]>
</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>