CODEWITHSUNDEEP
jquery-uijqueryjquery-autocompletejquery-ui-autocomplete
Cristhian Boujon
Cristhian Boujon

Reputation: 4190

Autocomplete Jquery does not shows the results

I using Jquery autocomplete and I have the following code:

Client side:

    $( "#tags" ).autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "get_professionals",
            data: request,
            dataType: "json",
            type: "POST",
            success: function(data){
                alert("hello");
            }
        });
    }  
});

Server side:

function get_professionals() {
    if ($_POST["term"]):
        $professionals = Professional::find('all', array('conditions' => "name LIKE '%" . $_POST["term"] . "%'"));
        foreach ($professionals as $professional):
            echo $professional->to_json();
        endforeach;  
    endif;
}

the URL is right and, in fact, I get the results from server(I checked it from Firebug in "post" tab) but does not shows

Upvotes: 1

Views: 171

Answers (1)

jk.
jk.

Reputation: 14435

The autocomplete requires a label and/or value field to be returned in the data.

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

Adjust your query to return what you want in the autocomplete in value and/or label fields. 

SELECT name AS label, id AS value from professionals.....

Or, some other method to return values like the bolded example from the documentation above. For example, you could set the label and value fields in the success function:

success: function(data) {
    response($.map(data, function(item) {
        return {
                label: item.name,
                id: item.id
                };
        }));
      }

Upvotes: 1

Related Questions