我正在尝试遵循另一个问题的解决方案,但没有得到任何运气。
我有一个动态文本框,想要对其应用一些自动完成功能,这是我的代码
Javascript:
$(function () {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size();
$('#addScnt').live('click', function () {
$(' <tr> <td> <input type="text" id="kdbr" class ="kdbr" style="width:300px;" name="kdbr[]" value=""/></td><td> <input type="text" id="nmbr" class ="nmbr" style="width:300px;" name="nmbr[]" value="" /></td><td><input type="text" id="jumlah" style="width:80px;" name="jumlah[]" value="" /></td></label> <td><input id="remScnt" style="width:80px;" class="btn" type="button" value="Remove" ></td> </tr>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function () {
//if (i > 1) {
$(this).parents('tbody').remove();
// i--;
//}
return false;
});
$(".kdbr").autocomplete({
source: function (request, response) {
$.ajax({
url: "<?php echo base_url();?>js/coba3.php",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
// var data = $.parseJSON(response);
response($.map(data, function (el) {
return {
value: el.kdbr,
label: el.nmbr
};
}));
}
});
},
select: function (event, ui) {
// Prevent value from being put in the input:
event.preventDefault();
$('.kdbr').val(ui.item.value);
// Set the next input's value to the "value" of the item.
$('.nmbr').val(ui.item.label);
}
});
});
html:
<table id="p_scents" class="table table-striped table-bordered">
<thead>
<tr>
<th style="width:400px;">Kode Barang</th>
<th style="width:400px;">Nama Barang</th>
<th style="width:100px;">Jumlah</th>
<th style="width:100px;">Delete</th>
</tr>
</thead>
<tbody>
<label for="p_scnts">
<tr><td> <input type="text" id="kdbr" class ="kdbr" style="width:300px;" name="kdbr[]" value="" /></td><td> <input type="text" id="nmbr" class ="nmbr" style="width:300px;" name="nmbr[]" value="" /></td><td><input type="text" id="jumlah" style="width:80px;" name="jumlah[]" value="" /></td></label> <td><input id="remScnt" style="width:80px;" class="btn" type="button" value="Remove" ></td></tr>
</tbody>
自动完成功能仅适用于非动态的第一行,每次我尝试将鼠标指向自动完成列表或尝试向下指向时,该列表都会立即消失。
有人可以告诉我我哪里做错了吗?
最佳答案
live
已弃用,请改用on
。对于动态添加的元素使用
$(document).on('click', '.remScnt', function() {});
而不是
$('.remScnt').on('click', function() {});
由于
label
与tr
混合,您的 html 结构不正确- 对于动态添加的元素,应调用
autocomplete
(要处理此自动完成设置,应将其设置为全局)。 - 删除行的函数不正确。
- autocomplete
select
事件处理程序不正确:它将选定的值添加到所有行。 - autocomplete
source
函数已替换为数组,仅用于测试。
var autoCompleteSettings =
{
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ],
select: function(event, ui)
{
// Prevent value from being put in the input:
event.preventDefault();
var selectedEl = $(event.target);
selectedEl.val(ui.item.value);
// Set the next input's value to the "value" of the item.
selectedEl.closest('td').next().find('input').val(ui.item.label);
}
};
var addId = 0;
$(function()
{
var scntDiv = $('#p_scents');
$('#addScnt').on('click', function()
{
addId++;
$('<tr> <td> <input type="text" id="kdbr' + addId + '" class ="kdbr" style="width:300px;" name="kdbr[]" value=""/></td><td> <input type="text" class ="nmbr" style="width:300px;" name="nmbr[]" value="" /></td><td><input type="text" style="width:80px;" name="jumlah[]" value="" /></td><td><input class="remScnt btn" type="button" value="Remove" ></td> </tr>').appendTo(scntDiv);
$('#kdbr' + addId).autocomplete(autoCompleteSettings);
return false;
});
$(document).on('click', '.remScnt', function()
{
$(this).closest('tr').remove();
return false;
});
$(".kdbr").autocomplete(autoCompleteSettings);
});
关于javascript - 自动完成动态文本框不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25337228/