AJAX - Function - LiveSearch

Revision as of 20:43, 27 December 2012 by Philip Lacey (talk | contribs)
Revision as of 20:43, 27 December 2012 by Philip Lacey (talk | contribs)

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 be updated when live option clicked
			aryAjax_Settings[26] = "fnUpdate";							//Function to be performed after update	
	 
			fn_Ajax_BE_Process();
		}
	}
}

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

Now to explain the key elements of whats going on.