Question

I have a form here that I can get to autocomplete with hard-coded items in the problem-categories text field: http://www.problemio.com/add_problem.php by using this jquery code:

$("input#autocomplete").autocomplete({
    // Have to load stuff from db.
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});

What I am not sure how to do is to construct it using category names returned by making an ajax call. Could someone help explain the flow or post some pseudo-code for how this is usually done?

Thanks!!

Answer 1

You’re looking for the documentation, which even includes three examples of this.

Autocomplete can be customized to work with various data sources, by
just specifying the source option. A data source can be:

• an Array with local data
• a String, specifying a URL
• a Callback

The local data can be a simple Array of Strings, or it contains
Objects for each item in the array, with either a label or value
property or both. The label property is displayed in the suggestion
menu. The value will be inserted into the input element after the user
selected something from the menu. If just one property is specified,
it will be used for both, eg. if you provide only value-properties,
the value will also be used as the label.

When a String is used, the Autocomplete plugin expects that string to
point to a URL resource that will return JSON data. It can be on the
same host or on a different one (must provide JSONP). The request
parameter “term” gets added to that URL. The data itself can be in the
same format as the local data described above.

The third variation, the callback, provides the most flexibility, and
can be used to connect any data source to Autocomplete. The callback
gets two arguments:

• A request object, with a single property called “term”, which refers to the value currently in the text input. For example, when the
  user entered “new yo” in a city field, the Autocomplete term will
  equal “new yo”.
• A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the
  provided term, and can be in any of the formats described above for
  simple local data (String-Array or Object-Array with label/value/both
  properties). It’s important when providing a custom source callback to
  handle errors during the request. You must always call the response
  callback even if you encounter an error. This ensures that the widget
  always has the correct state.

The label is always treated as text, if you want the label to be
treated as html you can use Scott González’ html extension. The demos
all focus on different variations of the source-option – look for the
one that matches your use case, and take a look at the code.