如何自动选择下拉菜单
我有一个HTML表，其中有几个输入字段，因此当我从dropdown中选择任何选项时，我将填充表的一行，并在该行itemname内作为输入字段就是autocomplete。
所以我在做什么，我有一个像A BR SB EX~333这样的字符串，其中333是商品代码，另一个是名称，所以当我输入333时，该商品就会被填充。然后按下Enter键，我便开始专注并进行一些计算。
我要做什么
- 当我在自动完成字段中输入实例
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>
当我键入内容时，只剩下一个项目作为选项，我希望该项目进入输入字段，以便用户不要手动选择它。
如果还有其他方法可以执行此自动完成功能，那么我可以使用它，我只是想在输入时应该填写输入字段，因为我不想手动选择它。
2 个答案:
答案 0 :(得分：1)
在这里，您需要使用getToday(){
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dateToday = new Date().getDate();
let monthToday = monthNames[new Date().getMonth()];
let yearToday = new Date().getFullYear();
}
getYesterday(){
// var dateToday = new Date().getDate();
//let dateYesterday = new Date(Date.now() - 86400000).getDate();
//let monthYesterday = new Date(Date.now() - 86400000).getMonth();
//console.log(dateYesterday,monthYesterday)
//another approach I tried following
var dateToday = new Date().getDate();
var yesterday = dateToday.setDate(dateToday.getDate() - 1);
}
componentDidMount(){
this.getToday();
this.getYesterday();
}
回调
responsevar 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();
}
});
答案 1 :(得分：0)
我在j query自动完成插件中找到了一些东西，即
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>
我正在发布此答案，但我也准备使用其他方法
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？