trouble with jquery autocomplete.

Question

tyring to implement an autocomplete based on :http://www.devbridge.com/projects/autocomplete/jquery/#intro

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

You should return valid JSON. e.g. If you typed "Li" in the textfield you could return:

{
 query:'Li',
 suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'] 
}

The delimiter is not used for the returned values but it will allow you to enter multiple values with autocomplete.

If you accept "," as a delimiter it will allow you to type: "Netherlands,Li" and the autocomplete will work as if you typed "Li"

Answer 2

From the dev web page:

Web page that provides data for Ajax Autocomplete, vendors1.cfm will receive GET request with querystring ?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.

Regards, Satyajit