• Please take a moment and tell us about your project, or give us a call at (888) 873-3281.
  • Write a short description of your business and services required

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.

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)





  • 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

Profile-Ronald-Busky

Ronald Busky  Ron's ability to express our client's message in a way that drives results is remarkable. We are firm believers in ROI, and it starts with the first paragraph! Ron's robust style and diverse portfolio has allowed him to write for clients ranging from car dealers to luxury hotels.

4 Comments

  1. vinnie

    Reply

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

    • Rich

      Reply

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

  2. Jordi

    Reply

    Thanks.

  3. adam16ster

    Reply

    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?

Leave a Comment

Your email address will never be published or shared. Required fields are marked with an asterisk (*).