Question

Trying to implement an autocomplete based on this

It looks like it’s very straight forward but I cannot get this one to work with an ajax call. By not working, I mean I don’t see the drop down. Firebug shows no errors.

 <script type="text/javascript">
  var options, a;

  jQuery(function(){
  options = { serviceUrl:'vendors1.cfm', 
              delimiter: /(,|;)\s*/,
              deferRequestBy: 0,
              minChars:2};
 a = $('#query').autocomplete(options); 
  });
 </script>

now the vendors1.cfm, returns a ‘;’ seperated list: ABC CONSTRUCTION;ABC CONSTRUCTION;ABC CONSTRUCTION;ABC PLUMBING & ELECTRICAL SUPPLY INC etc.

how do i properly use the serviceURL. what format do I have to output the data?

Answer 1

From the dev web page:

Web page that provides data for Ajax Autocomplete, vendors1.cfm will receive GET request with query string as ?query="query string", and it must return JSON data in the following format:

{
 query:'Li',
 suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
 data:['LR','LY','LI','LT']
}

• query – original query value
• suggestions – comma separated array of suggested values
• data (optional) – data array, that contains values for callback function when data is selected.