I am using autocomplete Jquery, i want to select option from the value of autocomplete
HTML file content is available below:
<tr>
<td>id_post</td>
<td>:</td>
<td><input type="text" name="id_post" id="id_post" /></td>
</tr>
<tr>
<td>textbox1</td>
<td>:</td>
<td><input type="text" name="textbox1" id="textbox1" /></td>
</tr>
<tr>
<td>textbox2</td>
<td>:</td>
<td><input type="text" name="textbox2" id="textbox2" /></td>
</tr>
<tr>
<td>PSA Lama</td>
<td>:</td>
<td>
<select name="select1" id="select1">
<option value="">-</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
</td>
</tr>
<script>
$(function() {
var availableTags = [
<? php
// output data of each row
while ($row4 = mysqli_fetch_assoc($result4)){
echo
'{'.
'label: '.
'"'.$row4["data1"].
'",'.
' value1:'.
'"'.$row4["data2"].
' ",'.
' value2:'.
'"'.$row4["data3"].
' ",
'.'
},';
};
?>
];
$("#id_post").autocomplete({
source: availableTags,
select: function(event, ui) {
$('#textbox1').val(ui.item.value);
$('#textbox2').val(ui.item.value1);
$('#select1').val(ui.item.value2);
}
});
});
</script>
textbox1 and textbox2 shown the value of data1 and data2 but the select wont show the data2,
i think something wrong with this line $('#select1').val(ui.item.data2);
And the list option value from the select tag same with the data from value2 on the autocomplete.
Can anyone help me?
Update: According to the updated code, your problem is probably related to the conversion of array data from php to js.
I think you should get the data from MySQL into an array of data. After that
you can try like this to convert php array to js array:
<script>
$(function () {
<?php
$php_array = [
[
"label" => 'label1',
"value1" => 'label1',
"value2" => 'Option1',
],
[
"label" => 'label2',
"value1" => 'label2',
"value2" => 'Option2',
],
[
"label" => 'label3',
"value1" => 'label3',
"value2" => 'Option3',
],
];
$js_array = json_encode($php_array);
echo "const availableTags = ". $js_array . ";\n";
?>
$("#id_post").autocomplete({
source: availableTags,
select: function (event, ui) {
$('#textbox1').val(ui.item.value);
$('#textbox2').val(ui.item.value2);
$('#select1').val(ui.item.value2);
}
});
});
</script>