JQuery Autocomplete去重及层级建议实现问题求助

问题分析 #

• 重复location值：你之前用reduce去重时，每个location仅保留了最后一个关联对象，导致最终只显示单个地点，而非去重后聚合所有子项。
• 层级建议：默认Autocomplete不支持层级结构，需要自定义数据结构与渲染逻辑，实现「主地点+下属酒店」的嵌套展示效果。

完整解决方案代码 #

修改后的JavaScript代码 #

$(document).ready(function() {
    $('#check-in').hide();
    $('#lets-go').hide();

    $.ajax({
        type: "GET",
        url: "locprop.json",
        async: true,
        success: function(data) {
            // 按location分组，聚合对应酒店数据
            const groupedData = data.reduce((groups, item) => {
                const location = item.location;
                if (!groups[location]) {
                    groups[location] = {
                        value: location,
                        data: location,
                        children: []
                    };
                }
                groups[location].children.push({
                    value: item.property,
                    data: item.id.toString()
                });
                return groups;
            }, {});

            // 转换为数组格式，供Autocomplete调用
            const suggestions = Object.values(groupedData);
            loadSuggestions(suggestions);
        }
    });

    function loadSuggestions(options) {
        $('#destination').autocomplete({
            lookup: options,
            onSelect: function(suggestion) {
                $('#destination').val(suggestion.value);
                $('#check-in').show();
                $('#lets-go').show();
            },
            // 自定义渲染层级列表项
            _renderItem: function(ul, item) {
                const $li = $('<li>').addClass('autocomplete-main-item').text(item.value);
                if (item.children && item.children.length > 0) {
                    const $subUl = $('<ul>').addClass('autocomplete-sub-items');
                    item.children.forEach(child => {
                        $subUl.append($('<li>').addClass('autocomplete-sub-item').data('item.autocomplete', child).text(child.value));
                    });
                    $li.append($subUl);
                }
                return $li.appendTo(ul);
            }
        });
    }
});

配套层级样式CSS #

.autocomplete-main-item {
    font-weight: bold;
    padding: 8px 12px;
    cursor: pointer;
}
.autocomplete-sub-items {
    margin: 0;
    padding-left: 20px;
}
.autocomplete-sub-item {
    font-weight: normal;
    padding: 6px 12px;
    cursor: pointer;
}
.autocomplete-sub-item:hover {
    background-color: #f0f0f0;
}

关键逻辑说明 #

1. 数据分组去重：
   通过reduce将原始JSON按location聚合，同一地点下的酒店存入children数组，既解决了重复值问题，又构建了层级数据结构。
2. 层级渲染实现：
   重写Autocomplete的_renderItem方法，判断当前项是否有子项，嵌套渲染子列表；搭配CSS区分主/子项样式，让层级关系更直观。
3. 选中事件兼容：
   无论选中主地点还是子酒店，都将对应值填入输入框，并触发后续元素显示逻辑。

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