Jquery Select 来自自动完成值的下拉选项

Question

I am using autocomplete Jquery, i want to select option from the value of autocomplete

    <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.data1);
        $('#textbox2').val(ui.item.data2);
        $('#select1').val(ui.item.data2);
      }
    });



  });
</script>

And here is my HTML code

    <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>
          <tr>

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

Answer 1

I think the problem is related to the data key you use not matching. I see you availableTags structure:

const availableTags = [
   {
       label: 'label1',
       value1: 'label1',
       value2: 'Option1',
   }
]

You assign this variable to $("#id_post").autocomplete({source: availableTags})

But in autocomplete's select option you print out a variable with a key that doesn't correspond to availableTags .

$('#textbox1').val(ui.item.data1); //data1 is not define
$('#textbox2').val(ui.item.data2); //data2 is not define
$('#select1').val(ui.item.data2); //data2 is not define

You need to change like this:

$('#textbox1').val(ui.item.value);
$('#textbox2').val(ui.item.value2);
$('#select1').val(ui.item.value2);

I simulated your code:

 $(function () { const availableTags = [ { label: 'label1', value1: 'label1', value2: 'Option1', }, { label: 'label2', value1: 'label2', value2: 'Option2', }, { label: 'label3', value1: 'label3', value2: 'Option3', }, ]; $("#id_post").autocomplete({ source: availableTags, select: function (event, ui) { $('#textbox1').val(ui.item.value); $('#textbox2').val(ui.item.value2); $('#select1').val(ui.item.value2); } }); });

 <link href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <table> <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> <tr> </table>