Recent News
Copyright © 2014 THAT Agency . All Rights Reserved.
410 Evernia Street, Suite 118, West Palm Beach, FL 33401
Tel: (561) 832-6262 | Fax: (561) 832-7707

Auto suggest with results based on text input and radio button

19 Aug Auto suggest with results based on text input and radio button

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.


		var searchTerm = $("#cityName").attr("value"); 

	else {


function sendValue(searchTerm){
	var searchTerm;
	$.post("/citysearch.php", { cityIs: searchTerm }, 
		$("#suggestLink a").click(clicked);
	return false;	

function clicked(){
	var okMan = $(this).attr("rel");
	var searchTerm = $("#cityName").attr("value");
	return false;

function getInformation(){
	var searchTerm = $("#cityName").attr("value");
	var okMan = $("input:radio[name=utilCat]:checked").val();
	$.post("/getBanners.php", { cityIs: searchTerm, categoryID: okMan }, 
		$("#utilContentBox .simple").hide();
	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)

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

CitySearch.php page

	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

	while ($banner = mysql_fetch_object($result))
"); 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

  • vinnie
    Posted at 09:26h, 29 August

    Awesome dude, thanks for shareit a real shame no more post here.

    • Rich
      Posted at 17:27h, 03 September

      Thanks Vinnie. There are more posts Check them out Here in our “Web Development” Section.

  • Jordi
    Posted at 10:23h, 15 September


  • adam16ster
    Posted at 15:23h, 15 September

    nice tut, thanks for sharing. demo would be nice. i see you guys use flash nicely and only when its called for…what do you guys think of fhtml?