function clearThis(target){
                    $("#username").val("");
                }


                function auto(response){
                    $("#username").autocomplete({
                        source: response,
                        select: function(event, ui){
                            log( ui.item ?
"" + ui.item.label :
"Nothing selected, input was " + this.value);
                           $("#selected_users").html(ui.item.label);
                            if(usernames.length){
                                if(usernames.indexOf(ui.item.label)){
                                    usernames.push(ui.item.label);
                                }
                            }else{
                                usernames.push(ui.item.label);
                            }
                            console.log(usernames);
                             clearThis();
                        }
                    });
                }

                function log( message ) {
                  $( "<div>" ).text( message ).prependTo( "#log" );
                  $( "#log" ).scrollTop( 0 );
                }

<div class="" style="margin-top:2em; font-family:Arial">
                        Result:
                        <div id="log" style="height: 200px; width: 300px; overflow: auto;" class=""></div>
                    </div>

                    <div class="form-group">
                        <label>Add Usernames</label>
                        <input type="text" name="username" id="username" autocomplete="off">
                    </div>
                    <div id="selected_users" class="form-group">
                        <label>Usernames</label><br>
                        <textarea>

                        </textarea>
                    </div>