AJAX - Function - LiveSearch
From All n One's bxp software Wixi
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 begin typing and it starts to seek out answers and displays them. bxp software databases can be used for LiveSearch; A text box can be used to LiveSearch on any field in an existing database. The below illustrates the steps that are necessary to get a simple AJAX look up function working on a form within BE. The form contains a name and phone number field. A user can search on a name and a list of results are displayed, when one of these options is clicked, the name and phone number are entered into the name and number fields on the form. This functionality greatly speeds up the process of adding new records if some of the details are the same as previous records in the campaign.
Contents
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 complete and populated, identify the field you want to search on. For this example we'll say that our source campaign is Campaign 686. The field within that campaign that we wish to search on is strCDA_686_field_0_1. Field strCDA_686_0_1 is a name field which records company names.
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. This code will call a method every time a key is pressed. 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();">
You will also need to create a generic area and place the following code into it to turn it into a HTML div. This is the area where the search results will be displayed.
<div id="divLiveSearch"></div>The below image shows what the form looks like and labels all the fields with ids used by the HTML and javascript code to make the tutorial easier to follow.
3 Step 3. We put in the JavaScript block.
The following code is the basic structure that live search calls follow. This gets placed in the JavaScript onLoad section of the campaign. There are two methods: fn_LiveSearch() and fn_Update(). fn_LiveSearch() performs the actual searching and displays the results, fn_Update is the function which kicks off after you click on the id button which gets displayed in the display area. In this case, it will perform an insert and place the name and phone number into the relevant fields 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_allnone"; //Your system name
aryAjax_Settings[1] = ""; //The CMI API Username
aryAjax_Settings[2] = ""; //The CMI API User password
aryAjax_Settings[3] = "686"; //The Id of the campaign
aryAjax_Settings[4] = "strCDA_686_field_0_1"; //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_686_Id,strCDA_686_field_0_1";
aryAjax_Settings[12] = "Id,Company Name";
aryAjax_Settings[17] = "intCDA_686_Id,strCDA_686_field_0_1";
//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_686_field_0_3"; //Field to get Id when button clicked
aryAjax_Settings[26] = "fnUpdate();"; //Function to be performed after update
aryAjax_Settings[27] = "strCDA_686_field_0_3_TextDisplay"; //Field to get Description when button clicked
fn_Ajax_BE_Process();
}
}
}
/*--------------------------------------
// The LiveSearch Followup function settings
--------------------------------------*/
function fnUpdate() {
if (typeof aryAjax_Settings=='undefined')
alert('Library did not load');
else {
aryAjax_Settings[0] = 'client_allnone'; //Your system name
aryAjax_Settings[1] = ''; //The CMI API Username
aryAjax_Settings[2] = ''; //The CMI API User password
aryAjax_Settings[3] = '686'; //The campaign which contains the product list
aryAjax_Settings[4] = 'intCDA_686_Id'; //The field which contains the limiting / grouping factor
aryAjax_Settings[5] = document.getElementById('strCDA_686_field_0_3').value; //The value to limit the responses by, in this case only yes items
aryAjax_Settings[13] = -1; //Limit responses -1 do not limit
aryAjax_Settings[14] = 'false'; //Draw a table
aryAjax_Settings[15] = ''; //Where to draw error messages if any
aryAjax_Settings[16] = 'Insert'; //Engine to use i.e. Populate
aryAjax_Settings[6] = 'strCDA_686_field_0_1,strCDA_686_field_0_2';//The field in the product campaign to display
aryAjax_Settings[12] = 'name,number'; //Not used
aryAjax_Settings[17] = 'strCDA_686_field_0_1,strCDA_686_field_0_2';//The field in the current campaign into which the products will be inserted.
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
fn_Ajax_BE_Process();
}
}
Now to explain the key elements of whats going on.
Line 8 gets the current value being searched for. This is the text that will be searched for in the form.
Line 9 declares a variable for the HTML div where the results of the search will be displayed.
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 17 if there are 2 or more letters typed in then the search function will kick off.
aryAjax_Settings is a general array that gets populated and used for all ajax calls in bxp. To use the live search functionality, you copy out the above code and change the values of the array to the details
of the system you're using and form and fields you searching with.
Line 18. The name of the system you are using.
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 for the value. In our example we are searching field_0_1 which contains the names of all the records.
Line 24. The search value that the function will look for. In our example above, this is the value of the box strLiveSearchText. 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. This enables/disables the ability for the button that is displayed in the search results to open up the relevant campaign. In this example, it is disabled.
Line 28. The div that will hold all the results
Line 29. Which engine of the Self Referencing to use. Here we have specified live search so it will perform fuzzy searching.
Line 31. These are the fields to be displayed of any resulting searches. At a minimum the Id must be specified. 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 36-38 Login details to allow user to search. These fields do not need to be changed. Leave them the way they are.
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. In the example above, when a button is clicked an update function is called which performs an insert.
Line 43. What field will take the text of the item, if needed. In our example the campaign search field holds these values.
Line 53. Declares a new function that gets called on a button press.
Line 54. If the AJAX array is not complete then an alert will be displayed tot he screen.
Line 57. The name of the system being used, will be the same as line 18.
Line 58,59. The username and password fields. These are left empty as there is separate code to get a user's login.
Line 60. The id of the form being searched and updated.
Line 61. The field which contains the limiting/grouping factor. In this case it is the id.
Line 62. The value to limit the responses by. In this case it is the vale of campaign search field which will contain the company name.
Line 63. An option to limit the responses, leave at 1 to prevent limiting.
Line 64. An option to draw a table, leave it at false as we do not need one.
Line 65. Where to draw error messages if any, this is optional. In our example it is left empty but can be filled in with a div or display area.
Line 66. The AJAX functionality to use. In this example, we are using insert which will take the value of the fields returned from the search and insert them into our form.
Line 67. These are the fields which contain the values you want to insert.
Line 68. The field names of values to be inserted.
Line 69. The fields into which the values are to be inserted. E.g. In the above example we want to get the name and contact number and that was displayed in the search and insert it into the form.
Line 70-72. The login details to be used for the insert. They are pulled from the form. This section of code always remains the same and does not need to be changed.
Line 73. After filling out the array, the general process function is called and performs the insert.
4 Step 4. Using the function
After you have all the set up done, you will need to make sure there are records in your form for the search to function correctly. If you have added code to a test form then it's likely there will not be enough records saved to demonstrate the live search functionality.
Go to Inbound Contact -> Take an Inbound Contact -> Select your form.
To perform a live search type into the box "Please Enter your search term". After two letters have been entered you will see a list of all the names that start with those two letters.
You can now click on the record you would like to insert and the fields on the form will be populated with the specified values.
This is how to get a simple ajax live search call working on a form. It can be changed around to suit your needs.
Under construction AJAX_-_Start_Here
