如何自动 select 下拉菜单

Question

我有一个 HTML table，里面有几个输入字段，所以当我 select 来自 dropdown 的任何选项时，我填充一行table，在那行 itemname 内作为输入字段，即 autocomplete.

所以我正在做的是我有一个像 A BR SB EX~333 这样的字符串，其中 333 是项目代码，其他是名称，所以当我键入 333 时，该项目就会被填充。然后按回车键我正在集中精力做一些计算。

我正在尝试做什么

例如，当我在自动完成字段中键入 333 并且只有一个选项时，我想将其填充到我的 inputfield 中。我不希望用户手动 select 该选项，如果匹配到单个 name，只需键入该选项，然后按回车键将其填充到输入字段中。

我的代码

var tableData = {
  "ALMOND CHBAR~2402": {
    "itemName": "ALMOND CHBAR",
    "itemCode": "2402",
    "costPrice": 20.0,
    "gstPercentage": 14.5,
    "mrp": 30.0
  },
  "A BR SB EX~333": {
    "itemName": "A BR SB EX",
    "itemCode": "333",
    "costPrice": 1.0,
    "gstPercentage": 0.0,
    "mrp": 1.0
  }
}


var autoCompleteData = Object.keys(tableData);

function rowappend(tbody) {

  const markup =
    `<tr>
           <td>
             <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
           </td>
           <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
           <td>
             <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
           </td>
                         
           <td>
             <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" >
           </td>
           <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly"></td> 
           <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly"></td>
           <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn"></i></td>
           
         </tr>`

  $(tbody).append(markup);
  setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

  $("[name=itemNametd]", tbody).last().autocomplete({
    source: autoCompleteData

  });




}
rowappend($('tbody', '#tableInvoice'))

function getValues(row) {

  const search = ($('[name=itemNametd]', row).val()).toString()
  const value = tableData[search];
  CostPrice = value.costPrice;

  if (value) {
    $(row).find("[name=itemCodetd]").val(value.itemCode);
    $(row).find("[name=mrptd]").val(value.mrp);
    $(row).find("[name=purRatetd]").val(CostPrice);

    $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
  }

}
document.addEventListener("keydown", function(e) {
  const row = e.target.parentElement.parentElement
  if (event.target.matches('[name=itemNametd]')) {

    var keycode = e.keyCode || event.e;
    if (keycode == '13') {

      getValues(e.target.parentElement.parentElement)
      $("[name=purRatetd]").focus();

    }
  }

});
$(document).on('focusout', (e) => {

  const row = e.target.parentElement.parentElement
  if (e.target.matches("[name=itemNametd]")) {


    getValues(e.target.parentElement.parentElement)
    $("[name=purRatetd]").focus();

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="row tableInvoice" id="commonDvScroll">
  <table class="table table-bordered" id="tableInvoice">
    <thead>
      <tr>
        <th id="itemNameth" class="commanth">Item Name</th>
        <th id="itemCodeth" class="commanth">Item Code</th>
        <th id="unitQtyth" class="commanth">Unit Qty</th>
        <th id="purRateth" class="commanth">Pur.Rate</th>
        <th id="discPercentageth" class="commanth">Disc%</th>
        <th id="discAmtth" class="commanth">Disc Amt</th>
        <th id="gstPercentageth" class="commanth">Gst%</th>
        <th id="gstAmtth" class="commanth">Gst Amt</th>
        <th id="totalAmtth" class="commanth">Total Amount</th>
      </tr>
    </thead>
    <tbody>

    </tbody>

  </table>

</div>

当我键入并且只剩下一项作为选项时，我希望它进入输入字段，这样用户就不会 select 手动输入。

如果有任何其他方法可以执行此自动完成，我愿意使用它，我只是想在我打字时填写输入字段，因为我不想 select手动。

Answer 1

我在 j query 自动完成插件中找到了 Something 即

autoSelectFirst: true,
 autoFocus: true

这就是我想要实现的目标

var tableData = {
  "ALMOND CHBAR~2402": {
    "itemName": "ALMOND CHBAR",
    "itemCode": "2402",
    "costPrice": 20.0,
    "gstPercentage": 14.5,
    "mrp": 30.0
  },
  "A BR SB EX~333": {
    "itemName": "A BR SB EX",
    "itemCode": "333",
    "costPrice": 1.0,
    "gstPercentage": 0.0,
    "mrp": 1.0
  }
}


var autoCompleteData = Object.keys(tableData);

function rowappend(tbody) {

  const markup =
    `<tr>
           <td>
             <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
           </td>
           <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
           <td>
             <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
           </td>
                         
           <td>
             <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" >
           </td>
           <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly"></td> 
           <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly"></td>
           <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn"></i></td>
           
         </tr>`

  $(tbody).append(markup);
  setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

  $("[name=itemNametd]", tbody).last().autocomplete({
    source: autoCompleteData,
    autoSelectFirst: true,
    autoFocus: true

  });




}
rowappend($('tbody', '#tableInvoice'))

function getValues(row) {

  const search = ($('[name=itemNametd]', row).val()).toString()
  const value = tableData[search];
  CostPrice = value.costPrice;

  if (value) {
    $(row).find("[name=itemCodetd]").val(value.itemCode);
    $(row).find("[name=mrptd]").val(value.mrp);
    $(row).find("[name=purRatetd]").val(CostPrice);

    $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
  }

}
document.addEventListener("keydown", function(e) {
  const row = e.target.parentElement.parentElement
  if (event.target.matches('[name=itemNametd]')) {

    var keycode = e.keyCode || event.e;
    if (keycode == '13') {

      getValues(e.target.parentElement.parentElement)
      $("[name=purRatetd]").focus();

    }
  }

});
$(document).on('focusout', (e) => {

  const row = e.target.parentElement.parentElement
  if (e.target.matches("[name=itemNametd]")) {


    getValues(e.target.parentElement.parentElement)
    $("[name=purRatetd]").focus();

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="row tableInvoice" id="commonDvScroll">
  <table class="table table-bordered" id="tableInvoice">
    <thead>
      <tr>
        <th id="itemNameth" class="commanth">Item Name</th>
        <th id="itemCodeth" class="commanth">Item Code</th>
        <th id="unitQtyth" class="commanth">Unit Qty</th>
        <th id="purRateth" class="commanth">Pur.Rate</th>
        <th id="discPercentageth" class="commanth">Disc%</th>
        <th id="discAmtth" class="commanth">Disc Amt</th>
        <th id="gstPercentageth" class="commanth">Gst%</th>
        <th id="gstAmtth" class="commanth">Gst Amt</th>
        <th id="totalAmtth" class="commanth">Total Amount</th>
      </tr>
    </thead>
    <tbody>

    </tbody>

  </table>

</div>

我发布了这个答案，但我也准备使用其他方法

Answer 2

给你，你需要为此使用 response 回调

var tableData = {
  "ALMOND CHBAR~2402": {
    "itemName": "ALMOND CHBAR",
    "itemCode": "2402",
    "costPrice": 20.0,
    "gstPercentage": 14.5,
    "mrp": 30.0
  },
  "A BR SB EX~333": {
    "itemName": "A BR SB EX",
    "itemCode": "333",
    "costPrice": 1.0,
    "gstPercentage": 0.0,
    "mrp": 1.0
  }
}


var autoCompleteData = Object.keys(tableData);

function rowappend(tbody) {

  const markup =
    `<tr>
           <td>
             <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
           </td>
           <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
           <td>
             <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
           </td>
                         
           <td>
             <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" >
           </td>
           <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly"></td> 
           <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly"></td>
           <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly"></td>
           <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn"></i></td>
           
         </tr>`

  $(tbody).append(markup);
  setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

  $("[name=itemNametd]", tbody).last().autocomplete({
    source: autoCompleteData,
    response: (e, ui)=>{
      if(ui.content.length === 1){
        $(e.target).val(ui.content[0].label);
        $(e.target).autocomplete( "close" );
      }
    }
  });




}
rowappend($('tbody', '#tableInvoice'))

function getValues(row) {

  const search = ($('[name=itemNametd]', row).val()).toString()
  const value = tableData[search];
  CostPrice = value.costPrice;

  if (value) {
    $(row).find("[name=itemCodetd]").val(value.itemCode);
    $(row).find("[name=mrptd]").val(value.mrp);
    $(row).find("[name=purRatetd]").val(CostPrice);

    $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
  }

}
document.addEventListener("keydown", function(e) {
  const row = e.target.parentElement.parentElement
  if (event.target.matches('[name=itemNametd]')) {

    var keycode = e.keyCode || event.e;
    if (keycode == '13') {

      getValues(e.target.parentElement.parentElement)
      $("[name=purRatetd]").focus();

    }
  }

});
$(document).on('focusout', (e) => {

  const row = e.target.parentElement.parentElement
  if (e.target.matches("[name=itemNametd]")) {


    getValues(e.target.parentElement.parentElement)
    $("[name=purRatetd]").focus();

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="row tableInvoice" id="commonDvScroll">
  <table class="table table-bordered" id="tableInvoice">
    <thead>
      <tr>
        <th id="itemNameth" class="commanth">Item Name</th>
        <th id="itemCodeth" class="commanth">Item Code</th>
        <th id="unitQtyth" class="commanth">Unit Qty</th>
        <th id="purRateth" class="commanth">Pur.Rate</th>
        <th id="discPercentageth" class="commanth">Disc%</th>
        <th id="discAmtth" class="commanth">Disc Amt</th>
        <th id="gstPercentageth" class="commanth">Gst%</th>
        <th id="gstAmtth" class="commanth">Gst Amt</th>
        <th id="totalAmtth" class="commanth">Total Amount</th>
      </tr>
    </thead>
    <tbody>

    </tbody>

  </table>

</div>

如何自动 select 下拉菜单

How to auto select the dropdown

html

javascript

jquery

autocomplete

jquery-ui-autocomplete