facebook-complete UI-pattern with jQuery UI Autocomplete

by agib

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class="container">
    <input type="text" class="search-box form-control" placeholder="Search for programming language">
    <div class='overlay'></div>
</div>

CSS

body {
    margin: 20px;
}
.container {
    position: relative;
}
input {
    margin: 0;
}
.overlay {
    display: none;
    cursor: pointer;
    position: absolute;
    font-size: 14;
    top: 3px;
    left: 18px;
    padding: 4px 6px;
    color: white;
    background-color: slategray;
    z-index: 1000;
}

JavaScript

$(".search-box").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});

$(".search-box").on("autocompleteselect", function (event, ui) {
    $(this).blur();
    var selection = ui.item.label;
    $(".overlay").html(selection + "&nbsp;&times;").show();
});

$(".overlay").click(function () {
    resetSearchBox();
});

$(".search-box").keydown(function(e){
    var keycode =  e.keyCode ? e.keyCode : e.which;
    if(keycode == 8){ // backspace
        resetSearchBox();
    }
    else {
        if($(".overlay").is(":visible")){
            e.preventDefault();
        }
    }
    
});

function resetSearchBox() {
    $(".overlay").hide();
    $(".search-box").val("").focus();
}