AJAX - Function - LiveSearch

LiveSearch is the ability to use AJAX to lookup as if it was a search facility. This is commonly seen on the likes of Google's search page. You being typing and it starts to seek out answers. Now bxp software databases can be used for LiveSearch. A text box can be used to LiveSearch on any field in an existing database.

1 Step 1. Create and populate the data source campaign

This is the campaign from which the data comes. This is the campaign you will be searching on. With that campaign coplete and populated, identify the field you want to search on. For this example we'll say that our source campaign is Campaign 41. The field within that campaign that we wish to search on is strCDA_41_field_0_4.

2 Step 2. Create the text box and a div to store the results

This is the campaign in which we are going to use the LiveSearch. Usually a section header is added. Into the notes of this section header put

<input name="strLiveSearchText" id="strLiveSearchText" type="text" size="30" onkeyup="fn_LiveSearch();">
<div id="divLiveSearch"></div>

The first line calls the function every time a letter is entered into the box. The second div is where the output of the function goes.

3 Step 3. We put in the JavaScript block.

This gets placed in the JavaScript onLoad of the campaign. Main Menu > Database Management > Database - Primary Details > Campaign - Edit > Choose your campaign > JavaScript onLoad subsection > Opening Code execution box.

/*--------------------------------------
// The LiveSearch Lookup settings	
--------------------------------------*/
function fn_LiveSearch() {
	if (typeof aryAjax_Settings=="undefined")
		alert("Library did not load");
	else {
		var strValue = document.getElementById('strLiveSearchText').value;
		var divLiveSearch = document.getElementById('divLiveSearch');
		
		if (strValue.length == 0) {
			divLiveSearch.innerHTML = '';
		}
		else if (strValue.length < 2) {
			divLiveSearch.innerHTML = '';
		}
		else {
			aryAjax_Settings[0] = "client_demo"; 							//Your system name
			aryAjax_Settings[1] = ""; 								//The CMI API Username
			aryAjax_Settings[2] = ""; 								//The CMI API User password

			aryAjax_Settings[3] = "41"; 								//The Id of the campaign
			aryAjax_Settings[4] = "strCDA_41_field_0_4"; 						//The search field
			aryAjax_Settings[5] = strValue + "*"; 							//The search value
			
			aryAjax_Settings[13] = "-1";								//Id of the current record, used for delimiting and not repeating current case
			aryAjax_Settings[14] = "false";								//Click through to campaign?
			aryAjax_Settings[15] = "divLiveSearch";							//The id of the destination to which the matching links will be inserted
			aryAjax_Settings[16] = "LiveSearch";							//The types of processing.

			aryAjax_Settings[6] = "intCDA_41_Id,strCDA_41_field_0_4";
			aryAjax_Settings[12] = "Id,Company Name";
			aryAjax_Settings[17] = "intCDA_41_Id,strCDA_41_field_0_4";
		
			//Use my login to allow me to search
			aryAjax_Settings[22] = document.getElementById('intSystemGenerated_CompanyId').value; 	//Auto Login - System
			aryAjax_Settings[23] = document.getElementById('intSystemGenerated_UserId').value; 	//Auto Login - User
			aryAjax_Settings[24] = document.getElementById('intSystemGenerated_LoginKey').value; 	//Auto Login - SessionId

			//LiveSearch fields
			aryAjax_Settings[25] = "strCDA_312_field_0_2";						//Field to get Id when button clicked
			aryAjax_Settings[26] = "fnUpdate";							//Function to be performed after update	
			aryAjax_Settings[27] = "strCDA_312_field_0_2_TextDisplay";				//Field to get Description when button clicked
	 
			fn_Ajax_BE_Process();
		}
	}
}

/*--------------------------------------
// The LiveSearch Followup function settings	
--------------------------------------*/
function fnUpdate() {
	alert ('Complete!');
}

Now to explain the key elements of whats going on. Line 8 gets the current value being searched for. Line 9 where the results go.

We don't want to do a look up with too little values. Line 11, if nothing typed in, do nothing. Line 12, do nothing unless we have more than 1 letter. Line 18 on, do the lookup.

Line 18. Set the system Line 19 and 20 do not need to be set as we use the users log in details set in lines 36 through 38.

Line 22. The Database being LiveSearched Line 23. The field to be searched against. Line 24. As we may want to return multiple answers and not use exact matches, we add an * which will return all solutions beginning with whatever is typed in the box. You could put * at the start and then all reasults that END with what is typed would be located. A * front and end would match all cases.

Line 26. As can be used to exclude answers if needed. -1 does no limiting Line 27. No click through Line 28. The div that will hold all the results Line 29. Which engine of the Self Referencing to use.

Line 31. At a minimum the Id. The following fields are the returned data fields. This engine does not use the Campaign Search display fields. Line 32. Column headings if need. Line 33. The fields to actually display on screen.

Line 41. When the button to choose a LiveSearch candidate is clicked where should the Id be stored Line 42. When the function has finished storing the data, what further function should be executed. This is a handy optional continuation to allow you to extend the funtionality of a click easily. Line 43. What field will take the text of the item, if needed.

Line 53 to 55 show the extended function ready to use. In this case just performs a simple Alert to screen.