Typeahead JS 不适用于具有相同类的多个输入
Posted
技术标签:
【中文标题】Typeahead JS 不适用于具有相同类的多个输入【英文标题】:Typehead JS is not working on multiple inputs with same classes 【发布时间】:2019-07-22 06:32:04 【问题描述】:我面临的问题与发票系统有关。默认情况下存在一行,但如果有多个产品,则用户可以 Add New Item 使用 jQuery 追加功能添加新行。
发票系统的输入很少,其中之一是由 Typehead JS 自动完成的项目名称。
预定义行代码
<tbody id="TableBody">
<tr>
<td style="width: 220px">
<input type="text" class="form-control Item" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
</td>
<td>
<input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
</td>
<td>
<input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
</td>
<td>
<input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
</td>
<td>
<input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
</td>
<td>
<button type="button" class="btn btn-danger DelRow">Delete</button>
</td>
</tr>
</tbody>
添加新行的代码
$('#AddNewItem').click(function() $('#TableBody').append(`
<tr>
<td style='width: 220px'>
<input type='text' class='form-control Item' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
</td>
<td>
<input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
</td>
<td>
<input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
</td>
<td>
<input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
</td>
<td>
<input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
</td>
<td>
<button type="button" class="btn btn-danger DelRow">Delete</button>
</td>
</tr>
`); );
显示自动建议的代码
$(document).ready(function()
$('.Item').typeahead(
source: function (query, process)
return $.get('FetchItem.php?Item', query: query , function (data)
data = $.parseJSON(data);
return process(data);
);
,
);
);
我只是想显示有关所有附加字段的建议。 任何帮助将不胜感激,谢谢
Screenshot
【问题讨论】:
我注意到的另一件事是,当我在实际代码中编写两次输入代码时,它工作正常 【参考方案1】:毕竟,我得到了答案的解决方案。
我正在使用 jQuery 文档加载功能,该功能不适用于附加的行。
所以我只使用了$('.TableBody').on("click", ".Item", function()
而不是$(document).ready(function()
,它确实有效。
【讨论】:
以上是关于Typeahead JS 不适用于具有相同类的多个输入的主要内容,如果未能解决你的问题,请参考以下文章