jQuery UI Autocomplete解析返回JSON并生成指定字段表格的实现方法

步骤1：调整success回调字段提取逻辑 #

在success回调中先取返回数据的quotes数组，提取你需要的三个字段，处理后传给autocomplete的response回调：

success : function(data) {
    // 提取quotes数组，筛选需要的字段
    const formattedList = data.quotes.map(item => ({
        label: item.symbol, // 用于默认匹配逻辑，可自定义
        value: item.symbol, // 选中后默认填充到输入框的值，可自定义
        exchange: item.exchange,
        shortname: item.shortname,
        symbol: item.symbol
    }));
    response(formattedList);
},

步骤2：自定义渲染逻辑生成表格 #

你需要重写jQuery UI Autocomplete的_renderItem方法，把下拉项渲染成表格行，同时添加表头结构，完整修改后的代码如下：

<script>
    $(function() {
        $("#search").autocomplete({
            source : function(request, response) {
                $.ajax({
                    type: "POST",
                    url : "http://localhost:5000/search",
                    dataType : "json",
                    cache: false,
                    data : {
                        q : request.term
                    },
                    success : function(data) {
                        const formattedList = data.quotes.map(item => ({
                            label: item.symbol,
                            value: item.symbol,
                            exchange: item.exchange,
                            shortname: item.shortname,
                            symbol: item.symbol
                        }));
                        response(formattedList);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus + " " + errorThrown);
                        alert(textStatus + " " + errorThrown);
                    }
                });
            },
            minLength : 2,
            // 可选：自定义选中项后的逻辑
            select: function(event, ui) {
                $("#search").val(ui.item.symbol);
                return false;
            }
        }).data("ui-autocomplete")._renderItem = function(ul, item) {
            // 首次渲染时添加表格表头
            if (!ul.find('table').length) {
                ul.append(`
                    <table style="width:100%;border-collapse:collapse;">
                        <thead>
                            <tr>
                                <th style="border:1px solid #eee;padding:8px;text-align:left;">交易所</th>
                                <th style="border:1px solid #eee;padding:8px;text-align:left;">证券简称</th>
                                <th style="border:1px solid #eee;padding:8px;text-align:left;">证券代码</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                `);
            }
            // 渲染单条数据为表格行
            return $("<tr>")
                .append(`<td style="border:1px solid #eee;padding:8px;">${item.exchange}</td>`)
                .append(`<td style="border:1px solid #eee;padding:8px;">${item.shortname}</td>`)
                .append(`<td style="border:1px solid #eee;padding:8px;">${item.symbol}</td>`)
                .appendTo(ul.find('tbody'))
                .data("ui-autocomplete-item", item);
        };
        // 关闭下拉时清空容器，避免重复生成表头
        $("#search").on("autocompleteclose", function() {
            $(this).data("ui-autocomplete").menu.element.empty();
        });
    });
</script>

可选优化 #

你可以把代码中的内联样式抽为单独的CSS类，自定义表格的hover高亮、宽度、边距等效果，适配你的页面整体风格。

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