gpt4 book ai didi

javascript - 如何自动选择下拉列表

转载 作者:行者123 更新时间:2023-11-30 19:26:39 25 4
gpt4 key购买 nike

我有一个 HTML 表格,其中有几个输入字段,所以当我从 dropdown 中选择任何选项时,我将填充表格的一行,在该行 itemname 作为输入字段,它是自动完成

所以我正在做的是我有一个类似 A BR SB EX~333 的字符串,其中 333 是项目代码,其他是名称,所以当我键入 333 时,该项目会被填充。然后按下回车键,我就会集中注意力并进行一些计算。

我想做什么

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

我的代码

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>

please check out this image for better understanding

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

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

最佳答案

给你,你需要为此使用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>

关于javascript - 如何自动选择下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56831552/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com