I am a ColdFusion guy, without a doubt. At my new job, however, I have inherited the maintenance and enhancement duties of a large PHP application as well. One of the enhancements I was asked to make was to produce a select list of names that could be filtered on the fly as the user typed into a text box. Being somewhat new to PHP and having had to figure out a good approach to creating this feature, I thought I'd share it in case it helps someone else.
Picture if you will, a select list filled with names and immediately below it a text box for filtering that list. Better yet, here's what mine looks like:
As the user begins typing in the text box, the select list begins to be filtered, re-filtering as each letter is added or removed.
I'm using the Prototype javascript library to perform the ajax calls, and a PHP script I call "adminAjax.php" that listens for and responds to those ajax calls. First off then, the HTML and JS that sets up the user interface:
<div id="namelist" name="namelist" style="height:350px;width:200px;"></div> <script>
<div>
Last Name: <input type="text" id="fltName" name="fltName" size="25" />
</div>
Event.observe(window, 'load', function() {
Event.observe('fltName', 'keyup', function(e){filterByName(e);});
filterByName('');//this initially populates the select list with ALL names...
});
</script>
basically, I have one div that will hold the select list ("namelist"), and some js that, on page load, will bind the 'filterByName' function to the keyup event on the 'fltName' textbox. So, with every character entered or removed from that textbox, the current value will be passed to the filterByName function. Here's the filterByName function:
var params = new Hash();
params.set('namestring',strname);
params.set('actionval','getSelect');
new Ajax.Updater('namelist','adminAjax.php',{parameters:params,method:'get'});
}
Okay, now on to adminAjax.php.
I'm using this template exclusively for ajax responses, so what I did was to create a switch/case statement that routes to the appropriate function based on the incoming 'actionval' parameter. Important to note: in my case, I chose to create the entire select list on this end and then return the completed HTML. The Updater that made the Ajax call will then place the returned HTML into the target div for us. Here's the code:
<? //end of our switch router! Now for the functions that feed it... function getSelect(){ $Result=mysql_db_query($DBName,$Query,$Link); if(mysql_numrows($Result) == 0){ That's it! You may be thinking what I was originally thinking, something along the lines of "wouldn't it just be faster to have given the page a json representation of all the names, then used JS to filter it on the client side?" Well, the answer (at least in my case) is NOPE. I am working with about 3,000 names, and my first approach was to do it using the JSON data. This worked fine in Firefox, but IE...of course it ran painfully slow. Using the Ajax approach and just creating a new select list as the filter value changes works surprisingly fast in all browsers! Hope this helps. If you would like a good set of starter snippets, you can grab the zip file here.
//make sure we have a default value for the actionval parameter...
if(!isset($_GET['actionval'])){$_GET['actionval']='none';}
switch ($_GET['actionval']){
case 'getSelect':
$retval = getSelect();
echo $retval;
break;
case 'some_other_action':
$retval = bogusCall($_GET['someParam']);
echo $retval;
break;
}
include("settings.php");
$Query = "SELECT userid,firstname,lastname from myTable ";
$Query .= " where firstname <> '' and lastname <> '' ";
//filtering on lastname/firstname...?
if(isset($_GET['namestring']) && strlen($_GET['namestring'])>0){
$aStr = split(",",$_GET['namestring']);
$len = strlen(trim($aStr[0]));
$flen = (count($aStr) > 1)?strlen(trim($aStr[1])):0;
$Query .= "AND SUBSTR(lastname,1,".$len.") = '".trim($aStr[0])."' ";
if($flen > 0){
$Query .= "AND SUBSTR(firstname,1,".$flen.") = '".trim($aStr[1])."' ";
}
}
$Query .= "order by lastname,firstname";
$strField = "<br><br>No Records Found. Please Change Filter Values and Try Again.";
} else {//we have some records...let's build the select list HTML.
$strField ='<select name="selUsers" id="selUsers" size="20" style="width:200px;" >';
while($row = mysql_fetch_assoc($Result)){
$strField .= '<option value=\''.$row['userid'].'\'>'.$row['lastname'].', '.$row['firstname'].'</option>';
}
$strField .='</select>';
}
mysql_close();
return $strField;
}
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
You can read my post on my website to get a working example of 3 linked list with Ajax : http://www.vincentroye.com/?p=339
Continent -> Country -> City
Easy and intuitive ;)
Cheers,
Vincent Roye.