删除消息并组织自动完成输入字段 jquery 的结果

Question

如何删除消息并使用 css 在一个漂亮的下拉列表中组织结果（不想要引导程序或准备好的 css 文件）

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);
    }
});

和 html <input id="test">

Answer 1

您可以将消息设置为失败，将结果消息设置为空。 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: ''
    }
});

过滤后的结果位于 ul > li 元素中，您可以根据需要设置它们的样式。

示例：

.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;
}

将滚动添加到您的过滤器列表下拉集max-height 进行设置。

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