Jquery 从自动完成值中选择下拉选项

Question

我正在使用自动完成 Jquery，我想从自动完成的值中选择选项

HTML 文件内容如下：

<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 和 textbox2 显示了 data1 和 data2 的值，但选择不会显示 data2， 我觉得这条线有问题$('#select1').val(ui.item.data2);

并且选择标签中的列表选项值与自动完成时value2中的数据相同。

谁能帮帮我？

Answer 1

更新：根据更新后的代码，你的问题很可能与数组数据从php到js的转换有关。

我认为您应该将 MySQL 中的数据放入一个数据数组中。在那之后 您可以尝试这样将php array 转换为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>