如何自动选择下拉列表 [英] How to auto select the dropdown
问题描述
我有一个 HTML 表格,其中有几个输入字段,因此当我从 dropdown
中选择任何选项时,我将填充表格的一行,在该行 itemname
作为输入字段,它是 autocomplete
.
所以我正在做的是我有一个类似 A BR SB EX~333
的字符串,其中 333 是项目代码,other 是名称,所以当我输入 333 时,该项目会被填充.然后按下回车键,我会专注于做一些计算.
我想要做什么
- 当我在自动完成字段中输入例如
333
并且只有一个选项时,我想将其填充到我的inputfield
中.我不希望用户手动选择该选项,只需键入是否与单个name
匹配,然后按 Enter 将其填充到输入字段中.
我的代码
var tableData = {ALMOND CHBAR~2402":{"itemName": "ALMOND CHBAR","itemCode": "2402",成本价格":20.0,"gstPercentage": 14.5,先生":30.0},A BR SB EX~333":{"itemName": "BR SB EX","itemCode": "333",成本价格":1.0,"gstPercentage": 0.0,先生":1.0}}var autoCompleteData = Object.keys(tableData);函数 rowappend(tbody) {const 标记 =`<td><input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd"></td><td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commandd" readonly="readonly"></td><td><input type="text" name="mrptd" id="mrptd" class="form-control commandd" readonly="readonly"></td><td><input type="text" name="purRatetd" id="purRatetd" class="form-control command"></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 command" readonly="readonly"></td><td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commandd" readonly="readonly"></td><td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commandd" readonly="readonly"></td><td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control command" 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({来源:自动完成数据});}rowappend($('tbody', '#tableInvoice'))函数 getValues(row) {const search = ($('[name=itemNametd]', row).val()).toString()常量值 = 表数据[搜索];CostPrice = value.costPrice;如果(值){$(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.parentElementif (event.target.matches('[name=itemNametd]')) {var keycode = e.keyCode ||事件.e;如果(键码=='13'){getValues(e.target.parentElement.parentElement)$("[name=purRatetd]").focus();}}});$(document).on('focusout', (e) => {const row = e.target.parentElement.parentElementif (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"><头><tr><th id="itemNameth" class="commanth">项目名称</th><th id="itemCodeth" class="commanth">项目代码</th><th id="unitQtyth" class="commanth">单位数量</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">总金额</th></tr></thead></tbody>当我输入并且只剩下一个选项作为选项时,我希望它出现在输入字段中,这样用户就不会手动选择它.
如果有任何其他方法可以执行此自动完成功能,我愿意使用它,我只是希望在输入时填写输入字段,因为我不想手动选择它.
解决方案 I have found something in j query
autocomplete plug i.e
autoSelectFirst: true,自动对焦:真
这就是我想要实现的目标
var tableData = {ALMOND CHBAR~2402":{"itemName": "ALMOND CHBAR","itemCode": "2402",成本价格":20.0,"gstPercentage": 14.5,先生":30.0},A BR SB EX~333":{"itemName": "BR SB EX","itemCode": "333",成本价格":1.0,"gstPercentage": 0.0,先生":1.0}}var autoCompleteData = Object.keys(tableData);函数 rowappend(tbody) {const 标记 =`<td><input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd"></td><td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commandd" readonly="readonly"></td><td><input type="text" name="mrptd" id="mrptd" class="form-control commandd" readonly="readonly"></td><td><input type="text" name="purRatetd" id="purRatetd" class="form-control command"></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 command" readonly="readonly"></td><td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commandd" readonly="readonly"></td><td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commandd" readonly="readonly"></td><td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control command" 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({来源:autoCompleteData,自动选择第一:真,自动对焦:真});}rowappend($('tbody', '#tableInvoice'))函数 getValues(row) {const search = ($('[name=itemNametd]', row).val()).toString()常量值 = 表数据[搜索];CostPrice = value.costPrice;如果(值){$(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.parentElementif (event.target.matches('[name=itemNametd]')) {var keycode = e.keyCode ||事件.e;如果(键码=='13'){getValues(e.target.parentElement.parentElement)$("[name=purRatetd]").focus();}}});$(document).on('focusout', (e) => {const row = e.target.parentElement.parentElementif (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"><头><tr><th id="itemNameth" class="commanth">项目名称</th><th id="itemCodeth" class="commanth">项目代码</th><th id="unitQtyth" class="commanth">单位数量</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">总金额</th></tr></thead></tbody>我正在发布这个答案,但我也准备使用其他方法
I have an HTML table, inside which I have several input fields, so when I select any option from the dropdown
I am populating one row of the table, inside that row itemname
as input field which is autocomplete
.
So what I am doing is I have a string like A BR SB EX~333
where 333 is the item code and other is a name, so when I type 333 that item gets populated. Then on pressing enter I am focusing out and doing some calculations.
What I am trying to do
- When I type for instance
333
in autocomplete field and only one option is there I want to populate that inside my inputfield
. I don't want the user to manually select that option, just type if that matched to a single name
, then on pressing enter populate that inside the input field.
My code
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>
When I type and there is only one item left as option I want that to come inside the input field so that the user does not select it manually.
If there is any other way to do this autocomplete I am open to use that, I just want so that while I am typing I should get the input field filled as I don't want to select it manually.
解决方案 I have found Something in j query
autocomplete plug i.e
autoSelectFirst: true,
autoFocus: true
this is doing what I am trying to achieve
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>
i am posting this answer, but I am ready to use other approaches also
这篇关于如何自动选择下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆