ajaxCFC suggest example


Example of a single suggest function as an alternative to drop down boxes Start typing a state...

Client Side Script


		<script type="text/javascript">
			// initialize a new suggest component
			var stateLookup = new Suggest(); 
			/* optional settings */
				stateLookup.setListStyle("listStyle");
				stateLookup.setListItemStyle("listItemStyle");
				stateLookup.setListItemKey("listItemKey");
				stateLookup.setListItemValue("listItemValue");
				stateLookup.setListWidth("150px");
				stateLookup.setQueryFieldHolds(1);
				stateLookup.setShowKey(false);
			/* end optional settings */

			function getData(qry)	{
				// saves the string inside the suggest object
				window[selectedSuggestObject.name].setSearchString(qry);
				// send data to CF
				DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'getStates', qry, getDataResult);
			}
			
 			// call back function
			function getDataResult (r) {
				// show query div
			    window[selectedSuggestObject.name].showQueryDiv(r.state_code, r.state_name);
            }
			
			function itemSelectionListener(result)
			{
				//this function to sets the hidden field with key value..
				document.suggestForm.stateID.value=result.KEY;
			}

			function onInit() {
				
				 onSuggestFieldFocus(stateLookup);
				 stateLookup.InitQueryCode('stateLookup','fldStateLookup')
				 stateLookup.setSelectionListener(itemSelectionListener);
			}
			window.onload=onInit;
		</script>

Server Side Script

		
		<cfcomponent extends="ajax">
		
			<!--- remote call to get states --->
			<cffunction name="getStates" output="no" access="private">
				<cfargument name="state" type="string" required="Yes">
				
				<cfset var get_states = '' />
				<cfset var q_states = qStates() />
				
				<!--- select from your query --->
				<cfquery name="get_states" dbtype="query">
					select state_code, state_name
					from q_states
					where lower(state_name) like '#lcase(arguments.state)#%'
				</cfquery>
		
				<cfreturn get_states />
			</cffunction>
		
			<!--- remote call to get manufacturers --->
			<cffunction name="getManufacturers" output="no" access="private">
				<cfargument name="manufacturer" type="string" required="Yes">
				
				<cfset var get_manufacturers = '' />
				<cfset var q_manufacturers = qManufacturers() />
				
				<!--- select from your query --->
				<cfquery name="get_manufacturers" dbtype="query">
					select manufacturer_id, manufacturer_name
					from q_manufacturers
					where lower(manufacturer_name) like '#lcase(arguments.manufacturer)#%'
				</cfquery>
		
				<cfreturn get_manufacturers />
			</cffunction>
			
			
			
			<!--- ======================== HELPER FUNCTIONS to build queries  =============================== --->
		
			<!--- build states query --->	
			<cffunction name="qStates" output="no" access="private" returntype="query"
				hint="I create the example query for the getStates function">
			  <cfscript>
				// didn't want to rely on a real db, so I defined manually the first query here
					var q_states = queryNew('state_code,state_name');
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'AK');
					querySetCell(q_states, 'state_name', 'Alaska');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'AL');
					querySetCell(q_states, 'state_name', 'Alabama');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'AR');
					querySetCell(q_states, 'state_name', 'Arkansas');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'AZ');
					querySetCell(q_states, 'state_name', 'Arizona ');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'CA');
					querySetCell(q_states, 'state_name', 'California ');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'CO');
					querySetCell(q_states, 'state_name', 'Colorado ');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'CT');
					querySetCell(q_states, 'state_name', 'Connecticut');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'DC');
					querySetCell(q_states, 'state_name', 'District Of Columbia');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'DE');
					querySetCell(q_states, 'state_name', 'Delaware');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'FL');
					querySetCell(q_states, 'state_name', 'Florida');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'GA');
					querySetCell(q_states, 'state_name', 'Georgia');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'GU');
					querySetCell(q_states, 'state_name', 'Guam ');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'HI');
					querySetCell(q_states, 'state_name', 'Hawaii');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'IA');
					querySetCell(q_states, 'state_name', 'Iowa');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'ID');
					querySetCell(q_states, 'state_name', 'Idaho');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'IL');
					querySetCell(q_states, 'state_name', 'Illinois');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'IN');
					querySetCell(q_states, 'state_name', 'Indiana');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'KS');
					querySetCell(q_states, 'state_name', 'Kansas');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'KY');
					querySetCell(q_states, 'state_name', 'Kentucky');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'LA');
					querySetCell(q_states, 'state_name', 'Louisiana');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'MA');
					querySetCell(q_states, 'state_name', 'Massachusetts');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'MD');
					querySetCell(q_states, 'state_name', 'Maryland');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'ME');
					querySetCell(q_states, 'state_name', 'Maine');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'MI');
					querySetCell(q_states, 'state_name', 'Michigan');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'MN');
					querySetCell(q_states, 'state_name', 'Minnesota');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'MO');
					querySetCell(q_states, 'state_name', 'Missouri');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'MS');
					querySetCell(q_states, 'state_name', 'Mississippi');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'MT');
					querySetCell(q_states, 'state_name', 'Montana');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'NC');
					querySetCell(q_states, 'state_name', 'North Carolina');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'ND');
					querySetCell(q_states, 'state_name', 'North Dakota');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'NE');
					querySetCell(q_states, 'state_name', 'Nebraska');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'NH');
					querySetCell(q_states, 'state_name', 'New Hampshire');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'NJ');
					querySetCell(q_states, 'state_name', 'New Jersey');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'NM');
					querySetCell(q_states, 'state_name', 'New Mexico');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'NV');
					querySetCell(q_states, 'state_name', 'Nevada');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'NY');
					querySetCell(q_states, 'state_name', 'New York');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'OH');
					querySetCell(q_states, 'state_name', 'Ohio');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'OK');
					querySetCell(q_states, 'state_name', 'Oklahoma');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'OR');
					querySetCell(q_states, 'state_name', 'Oregon');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'PA');
					querySetCell(q_states, 'state_name', 'Pennsylvania');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'PR');
					querySetCell(q_states, 'state_name', 'Puerto Rico');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'RI');
					querySetCell(q_states, 'state_name', 'Rhode Island');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'SC');
					querySetCell(q_states, 'state_name', 'South Carolina');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'SD');
					querySetCell(q_states, 'state_name', 'South Dakota');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'TN');
					querySetCell(q_states, 'state_name', 'Tennessee');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'TX');
					querySetCell(q_states, 'state_name', 'Texas');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'UT');
					querySetCell(q_states, 'state_name', 'Utah');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'VA');
					querySetCell(q_states, 'state_name', 'Virginia ');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'VI');
					querySetCell(q_states, 'state_name', 'Virgin Islands');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'VT');
					querySetCell(q_states, 'state_name', 'Vermont');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'WA');
					querySetCell(q_states, 'state_name', 'Washington');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'WI');
					querySetCell(q_states, 'state_name', 'Wisconsin');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'WV');
					querySetCell(q_states, 'state_name', 'West Virginia');
					
					queryAddRow(q_states,1);
					querySetCell(q_states, 'state_code', 'WY');
					querySetCell(q_states, 'state_name', 'Wyoming');
			  </cfscript>
			  <cfreturn q_states>
			</cffunction>		
		
			<!--- build manufacturers query --->	
			<cffunction name="qManufacturers" output="no" access="private"
				hint="I provide the manufacturer query for the getManfucturers function">
			  <cfscript>
				// didn't want to rely on a real db, so I defined manually the first query here
					var q_manufacturers = queryNew('manufacturer_id,manufacturer_name');
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '18');
					querySetCell(q_manufacturers, 'manufacturer_name', '3M');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '19');
					querySetCell(q_manufacturers, 'manufacturer_name', 'ADL');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '20');
					querySetCell(q_manufacturers, 'manufacturer_name', 'APC');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '21');
					querySetCell(q_manufacturers, 'manufacturer_name', 'ARC');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '22');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Abbott');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '23');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Accutome');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '24');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Addision');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '25');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Addison');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '26');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Advanced Agri Solutions');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '27');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Advanced Nutritional Support');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '28');
					querySetCell(q_manufacturers, 'manufacturer_name', 'AgriLabs');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '29');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Akorn');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '30');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Albion');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '31');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Alcon');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '32');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Allergan');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '33');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Allerpet');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '34');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Alpar');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '35');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Amgen');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '36');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Amphastar');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '37');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Animal Dermatology Labs');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '38');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Animal Health Options');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '39');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Animed');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '40');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Applied Resources');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '41');
					querySetCell(q_manufacturers, 'manufacturer_name', 'AstraZeneca');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '42');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Auburn Labs');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '43');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Aveho');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '44');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Aventis');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '45');
					querySetCell(q_manufacturers, 'manufacturer_name', 'B. Braun');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '46');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Bausch & Lomb');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '47');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Baxter');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '48');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Bayer');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '49');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Benepet');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '50');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Bentoli');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '51');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Bexco');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '52');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Bimeda');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '53');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Bio-Nutrition');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '54');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Biomedica');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '55');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Bioniche');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '56');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Biovet');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '57');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Boehringer Ingelheim');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '58');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Bristol-Myers');
					
					queryAddRow(q_manufacturers,1);
					querySetCell(q_manufacturers, 'manufacturer_id', '59');
					querySetCell(q_manufacturers, 'manufacturer_name', 'Butler');
			  </cfscript>
			  <cfreturn q_states>
			</cffunction>			
			
		</cfcomponent>

description This example demonstrates how to use ajaxCFC along with a Suggest javascript library. It is geared toward data entry that would otherwise require a dropdown box. For lengthy lists using a suggest function makes it much easier on users.

When you start typing a state name, a list of states will appear after the second character (this is configurable, like many other parameters). The query data is returned as a ColdFusion regular query, and when an entry is selected, it populates a hidden field with the key value for later processing.

I created a query in ColdFusion so you do not depend on an external database to run this example. You should be able to easily replace the one I created with a real database.