处理选择性下拉列表

Question

我有一个包含100个项目的选择控件。

我希望控件仅在键入时显示下拉列表。

1. 当它获得焦点时，应该关闭下拉列表
   • openOnFocus：false
2. 选择项目后，应关闭下拉列表
   • closeAfterSelect：true
3. 使用标签选择项目时，应关闭下拉列表
4. 使用退格键删除某个项目时，应关闭该下拉列表
5. 使用x（删除插件）删除项目时，应关闭下拉列表

我如何实现3,4和5？

我的控制设置如下所示：

globalSelectizedEditor = $('#tagsEditor').selectize({
        plugins: ['remove_button'],
        valueField: 'Id',
        labelField: 'Name',
        searchField: 'Name',
        options: [],
        create: true,
        openOnFocus: false,
        persist: false,
        closeAfterSelect: true,
        render: {
            ...
        },
        load: function (query, callback) {
            ...
        },
        onItemAdd: function(value) {

            ...

            globalSelectizedEditor[0].selectize.close();

        },
        onItemRemove: function () {

            globalSelectizedEditor[0].selectize.close();

        }
    });

Answer 1

也许这可以帮到你。它对我很有用。

$('#tagsEditor').each(function() {

  var selectize = $(this).selectize({
    plugins: ['remove_button'],
    openOnFocus: false
  })[0].selectize;

  //Close dropdown on clicking on control in focus
  selectize.$control.on('mousedown', function() {
    selectize.close();
  });

  //Close dropdown on clicking on plugin X
  selectize.$control.on('click', function() {
    selectize.close();
  });

  //Close dropdown on deleting query by pressing BACKSPACE if less than 2 symbols left
  selectize.$control_input.on('keydown', function(e) {
    if (e.keyCode == 8 && selectize.$control_input.val().length < 2) {
      selectize.close();
    }
  });

  //Close dropdown on typing query less than 2 symbols
  selectize.on('type', function(e) {
    if (selectize.$control_input.val().length < 2) {
      selectize.close();
    }
  });

  //Close dropdown on adding item
  selectize.on('item_add', function() {
    selectize.close();
  });

  //Close dropdown on removing item
  selectize.on('item_remove', function() {
    selectize.close();
  });
});