Auto suggest with results based on text input and radio button

Posted by Ronald Busky on August 19, 2009

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)

	State

	


	City

	
	

    
    

    	
 Change of Address
        
 Phones
        
 Electric
        
 Cable / Satellite
        
 Water / Sewer / Trash
        
 High Speed Internet
    

CitySearch.php page

 0){
	echo "
";	
	while ($word = mysql_fetch_object($result)){
		print("utilCityName">$word->utilCityName");
	}
	echo "
";
}
else{
	echo "City was not found";
}
?>

GetBanners.php : used to get the actual information needed

 0){
	while ($banner = mysql_fetch_object($result))
	{
		print("
");
		echo nl2br($banner->utilAd);
		print("
			

			

			

		");						
	}
}
else{
	echo "There are currently no results for your search.";
}
?>

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“