![](/img/trans.png)
[英]Add a class to selected div that compares input value and data function
[英]Add selected value from autocomplete textview to a div with remove function
这是我的第一个Web项目。 我有一个textview连接到数据库,它具有自动完成过滤器。 我正在从数据库中获取数据,并且自动完成功能工作得很好。 从textview中选择一个项目后,我想要什么,我想将其添加到div中以显示它。 我也正确地将项目添加到div。 我的问题是,如果用户不小心添加了错误的名称,则无法添加删除功能。 我想通过单击名称后面的图像来删除该名称。 我还将项目添加到array(arr)中以使其保持跟踪。 所以我想同时更新数组(添加/删除)。
这是我的HTML部分。
<legend><span class="number">2</span> Meeting Participants </legend>
<div class="input_container">
<input type="text" id="participants_id" onkeyup="autocomplet()">
<ul id="participants_list_id"></ul>
</div>
<div id ="name_print_div_id" class="name_print_div" >
</div>
的JavaScript
var arr = new Array();
var xx;
function autocomplet() {
var wrapper = $(".input_container"); //Fields wrapper
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#participants_id').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_refresh.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#participants_list_id').show();
$('#participants_list_id').html(data);
$('#participants_list_id li').click(function() {
xx = $(this).text();
arr.push(xx);
console.log(arr);
$(wrapper).append('<div>' + xx + '<img src="assest/img/close2.png" width="14px" height="14px"/></a></div>'); //add input box
$('#participants_id').val('');
});
}
});
} else {
$('#participants_list_id').hide();
}
}
您可以在关闭按钮中添加onclick
事件。
$(wrapper).append('<div>' + xx + '<img src="assest/img/close2.png" width="14px" height="14px" onclick="javascript:removeParticipant('"+xx+"')"/></div>'); //add input box
$('#participants_id').val('');
});
现在将函数定义为
function removeParticipant(participant_id){
//Removing element from array
var i = arr.indexOf(participant_id);
if(i != -1) {
arr.splice(i, 1);
}
//Update your div with new array elements
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.