Question

I have a problem with jQuery UI autocomplete. I think it comes from the source file (remote file named places.php ), but it is a little strange : this source is correctly json encoded, with no white space in its beginning (I thought this could be the problem, but it is not) and works fine when I directly access it in the browser. For instance, for the term ‘u’ it will return

(places.php)

[{"id":"2","place":"Belgium"},{"id":"1","place":"USA"}]

The problems come when I try to access the datas indirectly with this form :

<label for="the_value" value="">Value</label>
<input type="text" id="the_value" name="the_value" value=""/>         
<input type="hidden" id="the_id" name="the_id" value="default"/>

When the user types something in ‘the_value’ input box, the values from places.php should appear. Instead, the sliding panel opens for only 2 to 3 millimeters and displays nothing… (it seems that, even if no options are displayed, the script recognized they were available because it move a bit, which does not happen when not results exist …). Note: this problem is not browser related: it appears both in mozilla and IE8.
The javascript is the following

$(function(){
    $('#the_value').autocomplete({
        source : 'places.php',       
        select : function(event, ui){
            $('#the_id').val(ui.item.id);  
        }
    });
});

Any help would be much appreciated. Thanks in advance!

Answer 1

According to the jQuery UI documentation:

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 you change place to value, the plugin will know what to display in the dropdown, but you will still be able to access id in the select handler.