Spry AutoSuggest With Multiple Parameters

Thu, 17 Jan 2008 16:57:00-0400

When loading datasets from the server for for the Spry AutoSugget widget, Spry passes the value of the search field as a parameter to the dataset URL. This works fine, but what if the suggestions you want to provide are based on a combination of form fields? To give you a better of idea of what I mean, here is an example of a search form I was working on earlier today: (Note: this form doesn't work.)

I wanted to provide suggestions for the search term, but I wanted to limit those suggestions to only the country (U.S. or Canada) and type (City or Postal Code) selected. So if a user selects U.S. Cities they should only get U.S cities as suggestions, no Canadian cities or postal codes of any kind. This turned out to be fairly easy but I though I'd share my approach in case others are interested. Basically what I needed to do is append multiple parameters to the dataset URL. To accomplish this I added a new function to the Spry AugoSuggest widget named addReplaceParams:


  Spry.Widget.AutoSuggest.prototype.addReplaceParams = function(params)
  {
	
	var ds = this.dataset;
	ds.cancelLoadData();
	ds.useCache = false;
	
	this.setValue('');
	this.showSuggestions(false);
		
	var url = ds.url;
	
	for(var i=0; i < params.length; i++) {	
		url = Spry.Widget.Utils.addReplaceParam(url, params[i].param, params[i].value);	
	}		
	
	ds.setURL(url);
	ds.loadData();
	
  };

In a nutshell this function clears the search term, hides suggestions and updates the AutoSuggest's dataset URL using an array of parameters passed to the function. The parameters are defined as simple JavaScript objects with two keys: param which is the name of the URL parameter, and value which is the value of the URL parameter. It does the actual parameter additon/replacement using the Spry.Widget.Utils.addReplaceParam() function. To update the URL using this function I wrote another function which I use as the onChange event handler for the country and type select elements.


  function updateDsURL(f){
	
	var country = f.radiusCountry[f.radiusCountry.selectedIndex].value;
	var type = f.radiusType[f.radiusType.selectedIndex].value;
	
	var params = [];
	params[0] = {param:'radiusCountry',value:country};
	params[1] = {param:'radiusType',value:type};
	
	theSuggest.addReplaceParams(params);	
  };

Putting it all together this is what it looks like:














Find candidates within  

of the following 

:




  
    
      {radiusvalue}

You may ask why two functions? Well, I thought this is something I may want to use again so I made the Spry.Widget.AutoSuggest.addReplaceParams() function fairly generic. For this example I included the function in the inline script block, but if I use it enough I'll probably end up putting it in my AutoSuggest.js file. OK, that's one down...

Getting Spry's Auto Suggest Widget to Hover in IE

Thu, 13 Dec 2007 17:03:00-0400

Yesterday Dan Vega posted an entry about an issue he was seeing with Spry Auto Suggest widget in IE 6. Well it turns out I was investigating the Spry Auto Suggest widget just last week because I needed the cause of this bug. Let me explain. [More]

newschuyl - Spry

Spry AutoSuggest With Multiple Parameters

Getting Spry's Auto Suggest Widget to Hover in IE