jquery ui autocomplete - how to?

Question

I may be looking at this all wrong.

But, I am trying to use the jquery ui autocomplete.

I want to pass it a url and it will get the suggestions from there.

my questions are
1: how do i specify the url?
2: how do i format the response?

Answer 1

This should get you started with specifying the URL part.

First create an input field to attach the autocomplete plugin to.

<input type="text" name="query" />

Then use this javascript to attach the autocomplete to the input box just created.

   $("#query").autocomplete({
       source: "/suggestions/get/",
       select: function(event, ui) {
          $("#new-field").val(ui.item.value);
       }
    });

The request uri will be something like this...

/suggestions/get/?term={selection}

selection represents the selection made in autocomplete.

Now on your server side you need to parse the uri and use the value of parameter term to do whatever you want - search the database for the selected choice, or something else.

You should format your response like this...

suggestion1
suggestion2
suggestion3
suggestion4

The suggestions should be on a new line (separated by \n)

Answer 2

On the jquery UI page you have a complete demo with different examples, that should be enough I think. Here's the url.