remove message and organize results for autocomplete input field jquery

Question

How can I remove the message and organize the results in a nice dropdown using css (don't want bootstrap or ready css files)

http://jsfiddle.net/SCuas/96/

var aCleanData = ['test','test1','abcd','abee','abc5','test4','te7','tee'];

$('#test').autocomplete({
    source: aCleanData,
    minLength: 2,
    search: function(oEvent, oUi) {
        var sValue = $(oEvent.target).val();
        var aSearch = [];
        $(aCleanData).each(function(iIndex, sElement) {
            if (sElement.substr(0, sValue.length) == sValue) {
                aSearch.push(sElement);
            }
        });
        $(this).autocomplete('option', 'source', aSearch);
    }
});

and the html <input id="test">

Answer 1

You can set message to failed and result message to null. Working example on JSFiddle. var aCleanData = ['test','test1','abcd','abee','abc5','test4','te7','tee'];

$('#test').autocomplete({
    source: aCleanData,
    minLength: 2,
    search: function(oEvent, oUi) {
        var sValue = $(oEvent.target).val();
        var aSearch = [];
        $(aCleanData).each(function(iIndex, sElement) {
            if (sElement.substr(0, sValue.length) == sValue) {
                aSearch.push(sElement);
            }
        });
        $(this).autocomplete('option', 'source', aSearch);
    },
    messages: {
        noResults: '',
        results: ''
    }
});

the filtered results are in ul > li elements you can style those according your need.

example:

.ui-autocomplete {
    width:100px;
    padding:0;
    margin:0;
    z-index:1000;
}
.ui-autocomplete li {
    background: #eee;
    text-align:left;
    cursor: pointer;
}
.ui-autocomplete li:hover {
    background: #ccc;
}
.ui-autocomplete li a {
    cursor: pointer;
    padding: 6px 10px;
    display: block;
}
.ui-autocomplete li a.ui-state-focus {
    background: #DE9C9C;
}

to add scroll to your filter list dropdown set max-height for set.

.ui-autocomplete {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 20px;
}