Ajax / Django / jQuery - автозаполнение заголовков и удаление, когда пользователь удаляет то, что было введено в поле ввода

(Перепост с Reddit) Я нахожусь на ранней стадии создания автозаполнения (я хотел бы, чтобы это был выпадающий список из используемого ввода, прямо сейчас это divs, которые добавляются), когда пользователь начинает вводить текст (как только >2 символа достигнуты). У меня была версия, которая несколько корректно показывала результаты, которые она извлекала из массивной базы данных после начала ввода текста. Но когда я добавил "else if" ближе к низу с намерением удалить все div'ы, которые были добавлены, как только пользователь начнет удалять введенную фразу, теперь ничего не появляется. Вот реализация моего js файла в его нынешнем виде:

$(document).ready(function() {
    $( "#movie_titles" ).keyup(function(){
        var movie_titles = $('#movie_titles').val();
        var has_typed = false;
        if (movie_titles.length > 2) {
            $.ajax({
                url: '/get_movies',
                type: 'POST',
                data: {'movie_titles': movie_titles,
                csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                dataType: 'json',
                success: function(response) {
                    // var len = response.length;
                    has_typed = true;
                    $('#movie_titles').empty();
                    console.log(response)
                    // for (var i = 0; i < len; i++) {
                    $('#result-part').prepend('<div class="movie-title">' + response.title + '</div>');
                    // $(this).val(''); return false;
                    }
            });
            console.log(movie_titles);
        } else if (has_typed && movie_titles.length <= 2) {
            $('#result-part').remove();
        }
    });
});

Есть идеи, как исправить это, или как лучше сделать это выпадающим из ввода?

Вернуться на верх