Jquery Select Dropdown Option From Autocomplete Value-CodePudding

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?

CodePudding user response：

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>