Javascript jqueryajax不断添加越来越多的元素

当用户搜索用户名时，他会得到结果。当他退格或修改查询时，结果只是不断地添加到以前的结果之上，而不是被修改的结果，并返回一个新的、更新的结果。我已经修改了这里和那里的脚本还没有成功

我的看法是：

<div class='container'>
    <div class='row'>
        <div class='col-sm-6 col-xs-12 col-centered'>
            <div class='panel panel-default'>
                <div class='panel-heading sticky'>
                    <div class='back pull-left'><a href='<?php echo site_url('chats') ?>'><span class='glyphicon glyphicon-chevron-left'></span></a></div>
                    <h1 class='panel-title text-center'>New Chat</h1>
                    <input class='form-control' id='search-field' type='text' placeholder='Username'>
                </div>
                <div class='panel-body'>
                    <ul class='users collapse'>
                    </ul>
                </div>
            </div>
        </div><!--end column-->
    </div><!--end row 1-->
</div><!--end container-->

结果:

---

这是您的用户容器：

var$usersElement=$（'.users'）

在ajax响应中，您需要：

$usersElement.append（users.show（）

但你总是附加，从不删除。在使用
用户填充元素之前，请尝试清空该元素
：

$usersElement.empty（）.append（users.show（）
离题，但您可能对该插件感兴趣（请参阅“使用示例”部分）：.Ha！完全有道理。我正在清空数组
用户
，但没有清空DOM。
$(function() {
    var $search_field = $('#search-field');

    $search_field.on('keyup', searchByUsername);
    $search_field.focus();
});

function searchByUsername(e) {
    var username      = this.value.trim();
    var keyCode       = e.keyCode;
    var data          = {username : username};
    var $usersElement = $('.users');
    var users         = [];


    // Use this condition to prevent searching when whitespace is entered
    if (username) {
        var request = $.ajax({
            url      : site_url + 'search/searchByUsername/',
            method   : 'GET',
            data     : data,
            dataType : 'json'
        });

        request.done(function(jsonRepsonse) {

            if (jsonRepsonse) {
                var status        = jsonRepsonse.status;
                var usernames     = jsonRepsonse.usernames;

                if (status === 'success') {
                    $.each(usernames, function(index, value) {
                        // must be one line or will throw syntax error
                        users.push("<li class='user text-center'><a href='#'><span class='glyphicon glyphicon-user'></span><strong class='username'>" + value + "</strong></a></li>");
                    });console.log(users);

                    $usersElement
                        .append(users)
                        .show();

                }
            }
        });

        request.fail(function(xhr, status, error) {
            console.log(error);
        });
    }
    users.length = 0
    $usersElement.hide();
}

    public function searchByUsername()
    {   
        $username  = $this->input->get('username', true);
        $usernames = [];

        if (!empty($username)) {
            $usernames = $this->find_users_model
                            ->searchByUsername($username);
        }


        if (!empty($usernames)) {
            $this->jsonResponse(
                ['status'    => 'success',
                 'usernames' => $usernames]);

            return;
        }

        $this->jsonResponse(
                ['status' => 'success',
                 'usernames' => ['User not found']]);
    }

    private function jsonResponse($response)
    {
        $this->output
            ->set_status_header(200)
            ->set_content_type('application/json', 'utf-8')
            ->set_output(json_encode($response));
    }