Как вывести содержимое input без дублирования?

Question

[Artem Pavliienko]

Всем привет.

Я отслеживаю input событием "input keyup", для того что бы вывести сразу на экран и для фильтрации блоков по данным который ввел пользователь. Но когда я пытаюсь вывести уже окончательную версию того что ввел пользователь (через click), у меня происходит дублирования.

События:

$('#searchPermitted').on('input keyup', function (e) {
   //...
   addLiBlocked();
}

Как вывожу на экран:

function addLiBlocked() {
    $('.select_lists-choose-blocked').click(function () {

        $('#select_left ul')
            .append('<li>' + $('#searchPermitted').val() + '</li>');
    })
}

Answer 1

[qst73]

Стандартный подход это использовать таймер между нажатиями.

var timeBetweenTypes = 700,  // время между нажатиями 700мс
	myTimer;                 // таймер

//запускаем таймер, когда стреляет keyup
$('#searchPermitted').on('input keyup', function(){
	clearTimeout(myTimer);
	if ($('#searchPermitted').val()) {
		myTimer = setTimeout(typeEnd, timeBetweenTypes);
	}
});

// считаем, что ввод текста в input закончен
function typeEnd () {
	$('#textAppender')
		.append('<li>' + $('#searchPermitted').val() + '</li>');
}

https://codepen.io/anon/pen/MGedzZ

Comments

[Artem Pavliienko]

Спасибо) Решения еще проще оказалась, нужно было просто не использовать функцию addLiBlocked()