appendTo пользовательский элемент не обновляется с автозаполнением

Question

У меня есть окно поиска, и я использую автозаполнение Jquery, чтобы получить результаты поиска, которые я хочу вернуть в пользовательский элемент.

На данный момент он добавляется каждый раз, когда изменяется поиск, что приводит к дублированию.

Мне было интересно, если есть опция, которая удалит содержимое пользовательского элемента при изменении условия поиска.

var $searchFriends = $("#searchFriends");
        $searchFriends.autocomplete({
                    source: "search/findFriends",
                    minLength: 3,
                    appendTo: "#searchResults",
                    select: function(event, ui) {
                        $('#searchFriends').val(ui.item.value);
                        return false;
                    }
                })
                .data("uiAutocomplete")._renderItem = function( ul, item){
            return $("<li class='friendResult' id='"+item.id+"'>")
                    .append("<a>"+item.value+"</a>")
                    .appendTo('#searchResults')
        };

В настоящее время у меня есть работа, которая работает нормально (ниже), но должен быть другой путь.

        $searchFriends.on('change textInput input', function (){
            $('#searchResults').empty();
        });

Answer 1

Ты можешь использовать html() заменить HTML в элементе (вместо использования append() добавить его).

var $searchFriends = $("#searchFriends");

$searchFriends.autocomplete({
    source: "search/findFriends",
    minLength: 3,
    appendTo: "#searchResults",
    select: function(event, ui) {
        $('#searchFriends').val(ui.item.value);
        return false;
    }
})
.data("uiAutocomplete")._renderItem = function( ul, item){
    var content =  $("<li class='friendResult' id='"+item.id+"'>").append("<a>"+item.value+"</a>");
    $('#searchResults').html(content);
};