Tom Select加载本地JSON数据失败，始终显示‘无结果’求助

核心问题点 #

• JSON数据结构不匹配：你的file.json直接返回数组格式，但代码里错误地尝试访问json.items，导致Tom Select接收不到有效数据，显示“无结果”。
• 静态JSON无法处理查询参数：你给请求URL加了?q=${query}，但静态.json文件不会解析该参数并返回过滤结果，每次请求都会拿到完整数组，且前端未做筛选逻辑。
• select标签占位符无效：原生<select>不支持placeholder属性，需要用空option实现提示效果。

修改后的代码 #

HTML部分

<select name="json" id="json" aria-label="Select item">
  <option value="">选择项目...</option>
</select>

JavaScript部分

var settings = {
    create: false,
    maxOptions: 10,
    maxItems: 1,

    valueField: 'url',
    labelField: 'title',
    searchField: 'title',
    sortField: 'title',

    load: function(query, callback) {
        // 静态JSON文件无需携带query参数
        fetch('http://127.0.0.1:4000/data/file.json')
            .then(response => response.json())
            .then(json => {
                // 前端根据输入关键词过滤数据
                let filteredData = json;
                if (query) {
                    const lowerQuery = query.toLowerCase();
                    filteredData = json.filter(item => 
                        item.title.toLowerCase().includes(lowerQuery)
                    );
                }
                callback(filteredData); // 直接传入过滤后的数组
            }).catch(()=>{
                callback();
            });
    },

    render: {
        option: function(item, escape) {
            return `<div class="py-2 d-flex">
                        <a href="${item.url}">${ escape(item.title) }</a>
                    </div>`;
        },

        item: function(item, escape) {
            return `<div class="py-2 d-flex">
                        <a href="${item.url}">${ escape(item.title) }</a>
                    </div>`;
        }
    },

    onChange: function(value) {
        if (value !== '') {
            window.location = value;
        }
    }
};
new TomSelect('#json', settings);

补充说明 #

如果后续需要后端处理数据过滤，可以保留URL中的query参数，同时让后端接口返回包含items属性的JSON对象（格式如{ "items": [...] }），但当前静态文件场景下，前端过滤是最直接的解决方案。

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