SixFive...

ajaxCFC Multiple Suggest on one page

I went on the hunt recently for a decent suggest component for ajaxCFC and after starting to build my own I came across this example from Rob Gonda for a single suggest with ajaxCFC. The issue here was that the code is built only to work for one component on a page. As I am […]
August 1, 2007 9:45 pm

ajaxCFC Multiple Suggest on one page

I went on the hunt recently for a decent suggest component for ajaxCFC and after starting to build my own I came across this example from Rob Gonda for a single suggest with ajaxCFC. The issue here was that the code is built only to work for one component on a page. As I am sure many of people also do we had a need to build many on a page. The other difference here was that we didn’t actually need to use the key value pair, only the value as we don’t always want to directly replace a select box, simply provide some useful suggestions from a large database table. I fixed a number of things from this example

  1. iFrame support for IE6 wasnt working
  2. allow multiple suggests on a page
  3. the least amount of js on the page to initialise
  4. highlight the text that was searched for in the suggestions

The zip of the suggest.js code is available from the download link at the bottom of the entry.

To use follow your standard ajaxCFC set up and include the suggest.js too:

<!--- add in ajaxCFC bits--->  
<script type='text/javascript'>
   _ajaxConfig = {'_cfscriptLocation':'/packages/ajax/personalDetails.cfc', '_jsscriptFolder':'/scripts/ajaxcfc','debug':false};
</script>  
<script type='text/javascript' src='/scripts/ajaxcfc/ajax.js'></script>  
<script type='text/javascript' src='/scripts/ajaxcfc/suggest.js'></script>

Then add in a form element:

And in a script box initialise the suggester, I have done 2 here to show you how to add more than one on a page:

There are a number of optional arguments you can set when initialising, I have included setListWidth() here as an example. The InitQueryCode() method takes the following parameters:

  • InitQueryCode: name – the name of the Suggest object created above
  • queryFieldName – the name/id of the text input your are attaching it to
  • methodName – the CFC method you are calling to get the data
  • keyCol – the key column from your query, HINT make this lowercase
  • valueCol – The value column in your query, HINT make this lowercase

I realise the code isnt all correct, and if my JS experience was a bit higher I would probably write it all into the class properly. Even so, it has been tested on FF 2.x, IE7, IE 6.x and works great. I hope it helps you.

Leave a Comment