Selectize load函数获取服务端搜索结果后HTML中不展示选项问题

根因定位 #

这个问题在ServiceNow Portal+Selectize的组合开发中非常常见，核心原因有三类：

• 远程返回的字段和Selectize配置的映射字段不匹配
• 异步请求回调没有触发AngularJS的脏检查，导致数据变更没有同步到Selectize组件
• 自定义渲染逻辑存在语法或依赖缺失问题

修复步骤 #

1. 优先确认返回数据结构 #

先在回调里加日志打印，确认c.data.activeUsers返回的每一条数据都包含三个必填字段：sys_id、name、user_name，字段大小写完全匹配，没有拼写错误。

2. 补充Angular脏检查触发逻辑 #

ServiceNow的c.server.update回调默认不在AngularJS的脏检查周期内，直接调用callback返回的数据不会被Selectize感知，需要用$applyAsync包裹回调触发视图更新。

3. 可选：补充搜索字段配置 #

显式指定searchField可以避免Selectize本地过滤误删远程返回的匹配结果。

4. 排查自定义渲染问题 #

如果修复后还是不显示，可以先注释render配置，用Selectize默认渲染逻辑测试，排除FontAwesome未引入、HTML拼接错误等渲染层问题。

修复后完整代码 #

JS代码 #

$scope.$selectUser = $('#selectUser').selectize({
    valueField: 'sys_id',
    labelField: 'name',
    // 新增搜索字段配置
    searchField: ['name', 'user_name'],
    maxItems: c.data.maxteam,
    placeholder:"Enter names or select below",
    create: false,
    load: function (query, callback) {
    
        if (!query.length) return callback();
         
        $scope.data.funcName = 'getUsers';
        $scope.data.searchQuery = query;
        $scope.data.kudosTo = [];
        
        //Server call happens here
        c.server.update().then(function(){ 
             
            //Search data coming fine in this variable
            var results = c.data.activeUsers; 
            // 新增脏检查触发，把callback放在$applyAsync里执行
            $scope.$applyAsync(function() {
                callback(results);
            });
             
        });
    },
    render: {
        option: function (item, escape) {
            return '<div class="option">' +
            '<div class="text">' +
            '<span class="name">' + escape(item.name) +"<i class='fa fa-circle circleFont'></i>"+ escape(item.user_name)  + '</span>' +
            '</div>' +
            '</div>';
        }
    },
});
$scope.selectizeControlUser = $scope.$selectUser[0].selectize; 

HTML代码（无变更） #

<div class="form-group text-left  clearfix">
    <select class="form-control" id="selectUser"  multiple></select>
</div>

验证逻辑 #

修改后输入搜索关键词，查看下拉框是否正常出现匹配选项，如果依然不显示可以打开浏览器控制台，检查是否有JS报错，以及返回的results数据结构是否符合预期。

内容的提问来源于stack exchange，提问作者Mr world wide