选择不显示来自 ajax 调用的数据答案

【问题标题】：Selectize not showing data from ajax call选择不显示来自 ajax 调用的数据
【发布时间】：2018-04-25 19:12:54
【问题描述】：

我正在使用 selectize js 来提供搜索功能，并让用户根据搜索选择多个项目。我的问题是数据正在被正确检索，但控件没有显示数据。这就是我的做法。

控件：

<label>Skills Required</label>
<select id="skills-ddl"  class="form-control" placeholder="Search skills.." multiple ></select>

Js：

$(function () {
    var $select = $('#skills-ddl').selectize({
        valueField: 'Id',
        labelField: 'Name',
        load: function (query, callback) {
            $.ajax({
                url: '/ClientProjects/GetSkills?keyword=' + encodeURIComponent(query),
                success: function (response) { console.log(response); $select.options = response; callback(response); }
            });
        }
    });

    var selectize = $select[0].selectize;

});

这是数据所在的屏幕截图：

当我按退格键使搜索文本框为空时，将显示上一个结果。

编辑：

我的响应数据如下所示：

【问题讨论】：

请发布您的response 对象，您正在成功或具有response 对象类似结构的虚拟数据。
编辑了我的帖子。

标签： javascript jquery ajax selectize.js

【解决方案1】：

我认为您缺少 searchField 属性，因为当您输入它时，它无法理解它必须在下拉列表中显示的属性。

尝试在labelField: 'Name', 之后添加searchField: 'Name'，这将在下拉列表中提供过滤器名称。

您的 js 代码应如下所示。希望对你有用

$(function () {
    var $select = $('#skills-ddl').selectize({
        valueField: 'Id',
        labelField: 'Name',
        searchField: 'Name',
        load: function (query, callback) {
            $.ajax({
                url: '/ClientProjects/GetSkills?keyword=' + encodeURIComponent(query),
                success: function (response) { console.log(response); $select.options = response; callback(response); }
            });
        }
    });

    var selectize = $select[0].selectize;

});

【讨论】：

我不敢相信我错过了那个。谢谢！

【解决方案2】：

尚未使用 selectize，但查看文档我发现加载函数应该只获取回调函数作为参数，没有查询参数。是这个问题吗？

https://github.com/selectize/selectize.js/blob/master/docs/api.md#methods_other

问候，乔辰

【讨论】：