У меня есть список выбора, когда элемент нажимается, элемент добавляется в div. Список состоит из пользователей из вызова PHP.
Теперь я хочу удалить элемент из списка при нажатии.
Как я могу удалить элемент из списка, не нарушая мой код?
Вот javascript:
$(function() {
var myUsers = new Array();
$("#keyword").autocomplete({
source: function(request, response) {
$.ajax({
url: "dist_user_search.php",
data: {
term: $('#keyword').val()
},
dataType: "json",
success: function(data) {
console.log('success');
var res = [];
for (var item of data) {
if (item['myResult']) {
res.push(item['myResult']);
}
}
response(res);
}
});
},
minLength: 2,
select: function(event, ui) {
if (myUsers.indexOf(ui.item.value) < 0) {
myUsers.push(ui.item.value);
var str = "";
myUsers.forEach(function(myUser) {
str = '<li>' + myUser + '</li>' // build the list
});
$('#log').append('<div>' + str + '</div>'); // append the list
$('#keyword').val('');
return false;
} else {
$('#keyword').val('');
return false;
}
}
});
});
Html:
<div class="ui-widget">
<label for="keyword">Users: </label>
<input id="keyword">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
3 ответа
Вы можете добавлять обработчики кликов к элементам li каждый раз, когда перестраиваете список.
var myUsers = new Array();
$("#keyword").autocomplete({
source: function (request, response) {
var res = [];
for (var i = 0; i < 3; i++) {
res.push("Item " + i);
}
response(res);
},
minLength: 0, // Just for testing, set this to 0
select: function (event, ui) {
if (myUsers.indexOf(ui.item.value) < 0) {
myUsers.push(ui.item.value);
var str = "";
// Notice how I changed 'str =' to 'str +='
myUsers.forEach(function(myUser) {
str += '<li>' + myUser + '</li>'
});
// Changed 'append' to 'html' to always show an up-to-date list
$('#log').html('<div>' + str + '</div>');
$("#log li").off("click").click(function () {
var removed = $(this).remove().text();
$("#removed").append(removed + ", ");
// Added this, to clear the user from the 'myUsers' array as well.
myUsers.splice(myUsers.indexOf(removed));
});
}
$('#keyword').val('');
return false;
}
});
.ui-helper-hidden-accessible {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="ui-widget">
<label for="keyword">Users: </label>
<input id="keyword">
</div>
<div style="margin-top: 100px;"><ul id="log"></ul></div>
<div id="removed">Removed: </div>
Изменить: изменен код, чтобы больше походить на ваш сценарий, я отметил с комментариями, что я думаю, что исправит несвязанную ошибку и причину, по которой вы не видите пользователей во второй раз.
Я использую этот код и работает нормально:
//get the index of item
var index = myArray.indexOf("itemToRemove");
//if exists
if (index > -1) {
//remove
myArray.splice(index, 1);
}
В конце концов, это то, что я сделал. Я использую массив для удобства позже, когда мне нужно сохранить элементы.
Когда я удаляю, я удаляю из div и массива одновременно.
<script>
$( function() {
var myUsers = new Array();
$( "#keyword" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "dist_user_search.php",
data: {term : $('#keyword').val()},
dataType: "json",
success: function( data ) {
console.log('success');
var res = [];
for (var item of data){
if (item['myResult']){
res.push(item['myResult']);
}
}
response( res );
}
} );
},
minLength: 2,
select: function( event, ui ) {
if(myUsers.indexOf(ui.item.value) < 0){
myUsers.push(ui.item.value);
var str = "";
myUsers.forEach(function(myUser){
str = '<li>' + myUser + ' X </li>' // build the list
});
$('#log').append('<div>' + str + '</div>'); // append the list
$("#log li").off("click").click(function () {
var $this = $(this);
$("#removed").append($this.text() + ", ");
$this.remove();
//remove from array..
myUsers.splice($.inArray($this, myUsers),1);
//debug show array.
//alert(myUsers);
});
$('#keyword').val(''); return false;
}
}
} );
//console.log(myUsers);
} );
</script>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.