选择不显示来自 ajax 呼叫的数据

Question

我正在使用 selectize js 来提供搜索功能，并允许用户 select 基于搜索的多个项目。我的问题是数据正在被正确检索，但控件未显示数据。这是我的做法。

对照：

<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;

});

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

当我按退格键使搜索文本框为空时，显示的是之前的结果。

编辑：

这是我的响应数据的样子：

Answer 1

尚未使用 selectize，但查看文档后我发现加载函数应仅将回调函数作为参数，而不是查询参数。是这个问题吗？

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

此致，约臣

Answer 2

我认为您缺少 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;

});

选择不显示来自 ajax 呼叫的数据

Selectize not showing data from ajax call

javascript

jquery

ajax

selectize.js