Estoy usando autocompletar Jquery, quiero seleccionar la opción del valor de autocompletar
El contenido del archivo HTML está disponible a continuación:
<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 y textbox2 mostraron el valor de data1 y data2 pero la selección no mostrará data2 , creo que algo anda mal con esta línea $('#select1').val(ui.item.data2);
Y el valor de la opción de lista de la etiqueta de selección es igual a los datos de value2 en la función de autocompletar.
¿Alguien puede ayudarme?
Actualización: según el código actualizado, su problema probablemente esté relacionado con la conversión de datos de matriz de php a js .
Creo que debería obtener los datos de MySQL en una matriz de datos. Después de eso, puede intentar convertir una 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>