devbridges autocomplete

by Yuval Bar-On

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.7/jquery.devbridge-autocomplete.min.js"></script>
<input type="text" class="autocomplete" id="ac" />

CSS

* {
    font-family: sans-serif;
}
.autocomplete-suggestions {
    overflow-y: auto;
    background: white;
    border: 1px solid #c1c1c1;
    width: 151px !important;
    border-top: none;
}
.autocomplete-suggestions .autocomplete-suggestion {
    color: #737373;
    margin: 5px;
    padding: 5px;
    border-radius: 4px;
}
.autocomplete-suggestions .autocomplete-suggestion.autocomplete-selected, .autocomplete-suggestions .autocomplete-suggestion:hover {
    background: #0957e4;
    color: white;
    cursor: pointer;
}

JavaScript

var ac = $('#ac');

ac.autocomplete({
    onSelect: function (x) {
        console.log(x);
    },
    lookup: ['January', 'February', 'March', 'April', 'May']
});


ac.on('blur', function (e) {
    var $this = $(e.target),
        val = $this.val(),
        acp = $this.data('autocomplete');

    var empty = function () {
        $this.val("");
    }

    if (!acp.isBadQuery(val)) {
        var newVal = $this.val();
        if (newVal != val) {
            var suggestions = acp.getSuggestions(val),
                len = suggestions.length;
            if (len == 1) acp.selectHint();
            else empty();
        }

    } else {
        empty();
    }

});