JQuery autocomplete apparently recognizing but not displaying select options
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 b开发者_JAVA技巧e 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!
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.
From jQuery's autocomplete 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 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.
Basically it's either an array, or if it's json, it needs to have "value" and/or "label" where value is the set value in your input element and label is the displayed value. If only "value" or "label" is present then they are used for both.
精彩评论