CODEWITHSUNDEEP
jqueryjsonjquery-uiautocomplete
locke92
locke92

Reputation: 50

Stumped: cannot get results to show with jQuery UI Autocomplete

I threw up a simple example with jquery autocomplete and cannot get it to work. I have no idea what's wrong, no errors and nothing's wrong with my JSON, yet it doesn't display results.

Here's my code

<div class="demo">

<div class="ui-widget">
    <label for="title">Title: </label>
    <input id="test" />
</div>


<script>
$(function() {
        $( "#test" ).autocomplete({
            source: "/searchbackend.php"
        });
});
</script>

JSON:

{"title":["Metroid: Other M"]}

Upvotes: 0

Views: 1198

Answers (2)

S L
S L

Reputation: 14318

I guess your output should be like this ["HELLO","HOW","DO","YOU","DO","?"] so use 1d array to output json.

$array = array("HELLO", "HOW", "DO", "YOU", "DO", "?");

echo json_encode($array);

Man .. this perfectly works.

$array = array(
                array("label" => "HELLO", "value" => "H"), 
                array("label" => "HOW", "value" => "H"), 
                array("label" => "DO", "value" => "D"),
                array("label" => "YOU", "value" => "Y"),
                array("label" => "DO", "value" => "D"));

echo json_encode($array);

Also try changing source: "/searchbackend.php" to source: "searchbackend.php"

Upvotes: 1

mu is too short
mu is too short

Reputation: 434635

From the fine manual (regarding the source option):

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. [...] The data itself can be in the same format as the local data described above.

And for local data:

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.

So, your JSON return should either be a simple array of strings or an array of objects like this:

[
    { label: 'Shown to humans', value: 'Value for the text input' },
     ...
]

Upvotes: 2

Related Questions