JAVASCRIPT » Ajax

This script shows you a list of options based on what you type into a text input. Example: Type in "A" and Ajax will get you a list of all contries starting with "A".Setup: create-countries.php create-countries.php is used to create the countries used in this demo. Before you execute this file in your browser, remember to create a database and put in the correct data in mysql_connect() and mysql_select_db() at the top of this file How to apply the script to a text field You apply this script by adding an onkeyup event to an input. Example: <input type="text" id="country" name="country" value="" onkeyup="ajax_showOptions(this,`getCountriesByLetters`)"> The ajax_showOptions function takes two arguments. The first one should always be this, i.e. a reference to the text field. The second one is just a string that is sent to the file on the server. This is useful in case you are applying this feature to more than one text field. If you do, this string is something you could check on on the server(example: if "getCountriesByLetters" is set, find countries, if "getStatesByLetters" is set, get states etc.). Javascript variables There are 4 Javascript variables at the top of ajax-dynamic-content.js which you could modify: var ajaxBox_offsetX = 0; var ajaxBox_offsetY = 0; var ajax_list_externalFile = `ajax-list-countries.php`; // Path to external file var minimumLettersBeforeLookup = 1; // Number of letters entered before a lookup is performed. ajaxBox_offsetX = X position offset of the list ajaxBox_offsetY = Y position offset of the list. ajax_list_externalFile = Path to file contacted by Ajax. This is the file that outputs content back to the script. minimumLettersBeforeLookup = How many letters do the user have to type in before the script search for matches ajax_list_externalFile(ajax-list-countries.php) This external file outputs items back to our script. It outputs the items in the following format: 1###Namibia|2###Nauru|3###Nepal|4###Netherlands I.e.: A list where the each item is separated by a pipe(|), and ID of country and name of country is separated by ###. Put ID into hidden form input The basic feature of the script is to put the name of selected country into a text field. You may also want to save the ID of the country selected. You can do that by putting in a hidden form field where the ID is the same as the name of your country + `_hidden`. Example: <td><label for="country">Country: </label></td> <td><input type="text" id="country" name="country" value="" onkeyup="ajax_showOptions(this,`getCountriesByLetters`)"> <input type="hidden" id="country_hidden" name="country_ID"></td> As you can see, we have a text input with name="country" and a hidden input with id="country_hidden".