Auto suggest with results based on text input and radio button

Posted on Aug 19, 2009 by Rich to Web Development

Recently we had a client that wanted the following:

1. They wanted to have an auto suggest based on input of the user for cities.

2. They also wanted “categories” in the form of radio buttons that would also be used to return some results.

So I used jQuery to accomplish this. Attached you will find the files. Some things to note is that you obviously have to place the jQuery file in there.

The Gist: Basically a user types the beginning of a city name. The code will execute the auto-suggest and return results based on “keyup” once the “city” from the list is clicked, it will enable the radio buttons. these radio buttons will control the results you see. change the radio button and see different results based on what the value of the radio button is as well as the city in the search box. Sounds interesting? here’s how I did it.

Javascript

// BEGIN DOM
$(function()
{
	$("input:radio[name=utilCat]").attr("disabled","disabled");
	$("#cityName").keyup(function(){
		var searchTerm = $("#cityName").attr("value"); 
		sendValue(searchTerm);
	});
 
 
 
	if($.browser.msie){
		$("input:radio[name=utilCat]").click(function(){
			getInformation();
		});
	}
	else {
		$("input:radio[name=utilCat]").change(function(){
			getInformation();
		});
	}
 
});
 
function sendValue(searchTerm){
	cleanUp();
	var searchTerm;
	$.post("/citysearch.php", { cityIs: searchTerm }, 
    function(data){
		$("#suggest").html(data);
		$("#suggest").show();
		$("#suggestLink a").click(clicked);
	});
	cleanUp();
	return false;	
}
 
function clicked(){
 
	var okMan = $(this).attr("rel");
	$("#cityName").attr("value",okMan);
	$("#suggest").hide();
	$(".utilRadio").removeAttr('disabled');	
	var searchTerm = $("#cityName").attr("value");
	getInformation();
	cleanUp();
	return false;
}
 
function getInformation(){
	var searchTerm = $("#cityName").attr("value");
	var okMan = $("input:radio[name=utilCat]:checked").val();
	$.post("/getBanners.php", { cityIs: searchTerm, categoryID: okMan }, 
    function(data){
		$("#utilContentBox").html(data);
		$("#utilContentBox .simple").hide();
	});
	cleanUp();
	return true;
}
function cleanUp(){
	$("input:radio[name=utilCat]").unbind('click', clicked);
	$("input:radio[name=utilCat]").unbind('click', getInformation);
}

HTML Form : This will post when changes to the form are made (so there is no submit button)

<form action="/search-utilities-results.php" name="utilForm" id="utilForm" enctype="multipart/form-data" method="post">
	<label for="stateName">State</label><br/>
	<input type="text" name="stateName" id="stateName" value="florida" disabled="disabled" /><br/><br/>
	<label for="cityName">City</label><br/>
	<input type="text" name="cityName" id="cityName" value="" />
	<div id="suggest"></div>
 
    <ul class="mUtilList">
    	<li><input type="radio" name="utilCat" id="utilCat" value="1"  class="utilRadio" checked="checked" /> Change of Address</li>
        <li><input type="radio" name="utilCat" id="utilCat" value="4"  class="utilRadio"  /> Phones</li>
        <li><input type="radio" name="utilCat" id="utilCat" value="2"  class="utilRadio"  /> Electric</li>
        <li><input type="radio" name="utilCat" id="utilCat" value="7"  class="utilRadio"  /> Cable / Satellite</li>
        <li><input type="radio" name="utilCat" id="utilCat" value="3"  class="utilRadio"  /> Water / Sewer / Trash</li>
        <li><input type="radio" name="utilCat" id="utilCat" value="6"  class="utilRadio"  /> High Speed Internet</li>
    </ul>
</form>

CitySearch.php page

<?php
$search = strtolower($_POST['cityIs']);
$sql = "SELECT utilCityName from util_city WHERE utilCityName LIKE '$search%' ORDER BY utilCityName LIMIT 10";
$result = mysql_query($sql) or die ('cannot perform query because: ' . mysql_error());
$num = mysql_num_rows($result);
if($num > 0){
	echo "<div id=\"suggestLink\">";	
	while ($word = mysql_fetch_object($result)){
		print("<a href=\"#\" rel=\"$word->utilCityName\">$word->utilCityName</a>");
	}
	echo "</div>";
}
else{
	echo "<span style=\"margin:0;padding:2px 0;\">City was not found</span>";
}
?>

GetBanners.php : used to get the actual information needed

<?php
$cityName = strtolower($_POST['cityIs']);
$catID = strtolower($_POST['categoryID']);
$sql = "SELECT utilAdID, utilAdDate, utilAdTypeID, utilAd, utilAdCity, utilAdName, utilCategoryID from util_ads WHERE utilCategoryID = '$catID' AND utilAdCity = '$cityName' ORDER BY utilAdDate DESC";
$result = mysql_query($sql) or die ('cannot perform query because: ' . mysql_error());
$num = mysql_num_rows($result);
if($num > 0){
	while ($banner = mysql_fetch_object($result))
	{
		print("<div style=\"text-align:left;\">");
		echo nl2br($banner->utilAd);
		print("</div>
			<div class=\"clear\"></div>
			<div class=\"clear10\"></div>
			<div class=\"clear\"></div>
		");						
	}
}
else{
	echo "<span style=\"margin:0;padding:2px 0;\">There are currently no results for your search.</span>";
}
?>

Go ahead and download it now and play around with it. I would love to hear some comments or maybe a simpler way to do this. We as developers always love to learn. get the “auto suggest with results based on text input and radio button now“