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);
};

appendTo自定义元素未使用自动完成功能进行更新

1 个答案: