Lets filter a select box with jQuery, Sack, PHP and MySQL…..
You may or may not need this, but it could come in handy at one point in time. So lets start..
I will show you the basics here, you may download the source at the bottom of the page.
View the DEMO
index.html
include these into the head section of the page. ajax.js is the Sack js functions. I will get into Sack later.
this goes into the head as well.
var ajax = new Array();
function getTextList(sel)
{
var color = document.getElementById('color').value; //gets value from text input
document.getElementById('colorReturn').options.length = 0;
if(color.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getColor.php?color='+color; //sends the GET to the php page
ajax[index].onCompletion = function(){ createText(index) };
ajax[index].runAJAX();
}
}
function createText(index)
{
var obj = document.getElementById('colorReturn'); //retruns the options from the php page
eval(ajax[index].response);
}
The form
Thats it for the index page. pretty straight forward. So now for the fun part.
getColor.php – This page contains the sql and php that returns the
mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());
$color = $_GET['color'];
if(isset($_GET['color'])){
$result = mysql_query("SELECT color FROM colors WHERE color LIKE '%$color%' LIMIT 0,10")
or die(mysql_error());
while($color = mysql_fetch_array( $result ))
{
echo 'obj.options[obj.options.length] = new Option("'.$color['color'].'","'.$color['color'].'");';
}
}
Its not the most detailed tutorial, but im not a tutorial guy.
View the DEMO
Download the SOURCE
5 Responses to “jQuery: Filter Select box with php and mysql”
I copied your 3 files and changed only the mysql_query() to “SELECT location FROM database.table WHERE location LIKE ‘%$color%’ LIMIT 0,5″ using my existing database, table, and field, but your color variable. I tested the query via MySQL Query Browser. Your index.html page appears with a select box and input box, but nothing happens when I type in the input box, nor do I get any mysql_error() messages. I’m pretty inexperienced. What should I change?
Thankyou Rob,
now i am very green but i know how to do what you said.
But im wondering if you could help me do this in a way that collects from one table and matches that to another table and then displays relusts.
For example::
A search for Frank st ( in one table )
would result
David Smith ( in a second table )
If you could help i would be in debted to you and even click a donate button if you have one
Cheers
John
So you have 2 tables? What is the key determining which user is in which location?
can i see your table structure?
do you have skype? if so you can add me to chat at
blueicestudios
Hi,
Thanks very much for this…
I just have one question?
Is this collectiong a values from two tables and then showing the result?
What do i name my tables to test this on my dev server?
just one table
CREATE TABLE IF NOT EXISTS `colors` (`id` int(11) NOT NULL auto_increment,
`color` varchar(255) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `color` (`color`)
)