如何在jQuery autocomplete中添加“1+More”标签按钮？

需求背景 #

• 已完成地点搜索框的jQuery Autocomplete多匹配项自动补全功能，当前所有匹配结果直接全部展示在下拉面板，交互体验不佳
• 目标效果：下拉面板默认仅展示前2条匹配建议，剩余结果收纳到X+ More按钮中，点击按钮可展开查看全部匹配项
• 效果参考：期望效果、当前效果

现有代码 #

Javascript 逻辑 #

<script type="text/javascript">
    $(function(){
        $.getJSON("<?php echo base_url();?>package.json", function(data) {
        
        autoComplete = [];
        for (var i = 0, len = data.length; i < len; i++) {
            autoComplete.push(data[i]);
        }
        $('#myAutocompleteMultiple').autocomplete({
            source: autoComplete,
            multiselect: true,
            
        });
    });
</script>

HTML 结构 #

<input id="myAutocompleteMultiple" type="text" placeholder="Search Location"/>

数据源（package.json） #

[
    "Al Barari Commercial",
    "Al Quoz Commercial",
    "Al Qusais Commercial",
    "Arjan Commercial",
    "Bur Dubai Commercial"
]

改造实现 #

实现逻辑 #

• 利用Autocomplete内置的response事件拦截匹配结果，默认截断仅展示前2条，追加More按钮项
• 自定义下拉项渲染规则，区分普通建议项和More按钮
• 给More按钮绑定点击事件，触发时渲染全部匹配结果实现展开
• 每次新搜索触发匹配时自动重置为折叠状态

改造后完整Javascript代码 #

<script type="text/javascript">
$(function(){
    // 可自定义默认展示的建议条数
    const DEFAULT_VISIBLE_COUNT = 2;
    let fullMatchList = [];

    $.getJSON("<?php echo base_url();?>package.json", function(data) {
        $('#myAutocompleteMultiple').autocomplete({
            // 直接使用接口返回的数组即可，无需额外循环转存
            source: data,
            multiselect: true,
            response: function(event, ui) {
                fullMatchList = ui.content;
                // 匹配结果数小于等于默认展示数时，不生成More按钮
                if (fullMatchList.length <= DEFAULT_VISIBLE_COUNT) return;
                // 截断结果，追加More按钮项
                ui.content = fullMatchList.slice(0, DEFAULT_VISIBLE_COUNT);
                ui.content.push({
                    label: `${fullMatchList.length - DEFAULT_VISIBLE_COUNT}+ More`,
                    value: '',
                    isMoreTrigger: true
                })
            }
        }).autocomplete("instance")._renderItem = function(ul, item) {
            ul.addClass('custom-ac-dropdown');
            if (item.isMoreTrigger) {
                return $('<li class="ac-more-btn">')
                    .append(`<div>${item.label}</div>`)
                    .appendTo(ul);
            }
            return $('<li class="ac-item">')
                .append(`<div>${item.label}</div>`)
                .appendTo(ul);
        };

        // 绑定More按钮点击展开事件
        $('#myAutocompleteMultiple').on('click', '.ac-more-btn', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const acInstance = $('#myAutocompleteMultiple').autocomplete('instance');
            acInstance._suggest(fullMatchList);
        })
    });
});
</script>

配套CSS样式 #

.custom-ac-dropdown .ac-more-btn {
    text-align: center;
    background: #f5f7fa;
    border-top: 1px solid #e4e7ed;
    color: #409eff;
    cursor: pointer;
}
.custom-ac-dropdown .ac-more-btn:hover {
    background: #ecf5ff;
}
.custom-ac-dropdown .ac-item div,
.custom-ac-dropdown .ac-more-btn div {
    padding: 8px 12px;
}
.custom-ac-dropdown .ac-item:hover {
    background: #f5f7fa;
}

配置说明 #

• 修改DEFAULT_VISIBLE_COUNT常量值即可调整默认展示的建议条数
• 点击More按钮不会修改输入框内容，仅展开全部匹配结果
• 每次输入新关键词触发新的匹配时，下拉面板会自动回到折叠状态

内容的提问来源于stack exchange，提问作者Shobin