javascript - 根据自动完成的数据自动填充另一个文本字段

Question

我有一个表单，其中包含数组中的字段，其中每行表示一条记录。在获得 item_name 的自动完成数据后，我需要自动填充相应的 company_name 字段，从数据库中提取数据。下面是我的代码:

$(document).ready(function() {
  $(".inputitem").autocomplete({
    source: 'search.php',
    minLength: 1,
    select: function(e, ui) {
      $('#result').html(e);
      $("#company_name", this).val(ui.item.company);
    }
  });
});

This form is an array of item_name and company_name. I need to auto fill company_name textbox according to the item_name auto complete data
<form action="" method="post" name="stock">
  <table cellpadding="2" cellspacing="0" border="0" width="100%" class="FormTbl">
    <tbody>
      <tr>
        <td>
          <strong>Item Name</strong>
        </td>
        <td>
          <strong>Company</strong>
        </td>
      </tr>
      <tr>
        <td>
          <input class="inputitem" type="text" name="item_name[]" id="item_name" autocomplete="off">
        </td>
        <td>
          <input type="text" name="company_name[]" id="company_name" value="">
        </td>
      </tr>
      <tr>
        <td>
          <input class="inputitem" type="text" name="item_name[]" id="item_name" autocomplete="off">
        </td>
        <td>
          <input type="text" name="company_name[]" id="company_name" value="">
        </td>
      </tr>
      <tr>
        <td>
          <input class="inputitem" type="text" name="item_name[]" id="item_name" autocomplete="off">
        </td>
        <td>
          <input type="text" name="company_name[]" id="company_name" value="">
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
        </td>
      </tr>
    </tbody>
  </table>
</form>    
This page returns item_name and company_name as autocomplete value
<?php
/* 
search.php
*/
require_once("connection.php");
$q=$_GET["term"];
$result = $mysqli->query("SELECT id,item_name,company_name  FROM tbl_item WHERE item_name LIKE '$q%' ORDER BY id LIMIT 15");
$json=array();
while($rasItem=$result->fetch_array(MYSQLI_ASSOC)){
    $json[]=array(
    'value'=> $rasItem["item_name"],
    'label'=> $rasItem["item_name"],
    'company'=> $rasItem["company_name"]
    );
}
echo json_encode($json);
?>

Answer 1

我创建了一个DEMO在这里。

在此演示中，我假设从 search.php 返回的 JSON 数据具有如下结构:

var itemsArrray = [
  {
    value: "Item 1",
    label: "Item 1",
    company: "Company 1",
    company_id: "cmp1"
  },
  {
    value: "Item 2",
    label: "Item 2",
    company: "Company 2",
    company_id: "cmp2"
  },
  {
    value: "Item 3",
    label: "Item 3",
    company: "Company 3",
    company_id: "cmp3"
  }
];

我在 company_name 文本框中添加了一个 class company_name，当您选择该项目时，该文本框会自动填充

$(".inputitem").autocomplete({
      //source: 'search.php',
      source: itemsArrray,
      minLength: 1,
      select: function(event, ui) {
        //Here $(this) points to the current autocomplete input element
        $(this).closest('tr').find('input.company_name').val(ui.item.company);
        $(this).closest('tr').find('input.company_id').val(ui.item.company_id);
      }
    });