Question

我正在尝试使用selectize进行搜索并在Dropdown中选择选项。用户正在搜索学生姓名，然后下拉必须显示建议作为用户类型。

$('#studentSearchBox').selectize({
    valueField: 'id',
    labelField: 'name',
    searchField: ['name'],
    maxOptions: 10,
    options: [],
    create: false,
    render: {
            option: function(item, escape) {
                console.log(item)
                    return '<div>' +escape(item.name)+'</div>';
            }
    },
    load: function(query, callback) {
            if (!query.length) return callback();
            $.ajax({
                    url: "\list", //url is correct as I can get json response
                    type: 'GET',
                    dataType: 'json',
                    data: {
                            q: query
                    },
                    error: function() {
                            callback();
                    },
                    success: function(res) {
                            callback(res.data);
                    }
            });
    },
    onChange: function(){
        window.location = this.items[0];
    }
});

json数据返回 - {＆＃39; 1＆＃39;：＆＃39; Jon＆＃39;＆＃39; 2＆＃39;：＆＃39; Jhonsan＆＃39;＆＃39; 3＆＃ 39;：＆＃39;杰里＆＃39;＆＃39; 4＆＃39;：＆＃39;朱＆＃39;}

但返回的json数据未在浏览器中呈现。没有控制台错误！

HTML

<select class="form-control selectized" id="mySearchBox" name="sid" tabindex="-1" style="display: none;"><option value="" selected="selected"></option></select>
<div class="selectize-control form-control single">
<div class="selectize-input items not-full has-options">
    <input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 1; position: relative; left: 0px;"></div>
    <div class="selectize-dropdown single form-control" style="display: none; width: 555px; top: 42px; left: 8px; visibility: visible;">
        <div class="selectize-dropdown-content">
            <div data-value="1" data-selectable="" class="option">Jon</div> 
            <div data-value="2" data-selectable="" class="option">Jasmine</div>
        </div>
    </div>
</div>
</div>

Answer 1

我有另外一个用于就地编辑的js因此它正在删除由selectize js应用的类。您可能需要检查是否应用了所需的类以使其正常工作。并且，请记住将其作为div而不是下拉列表处理。这可能会有所帮助

选择性不会动态呈现选项

1 个答案: