处理选择性下拉列表 [英] Handling dropdown on selectize

问题描述

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

I have a selectize control with 100 items.

我希望控件只在输入时显示下拉列表。

I want the control to show the dropdown only when typing.

1. 当它获得焦点时，下拉列应该关闭
   
   
   
   
   • openOnFocus ：false
   
   

• closeAfterSelect：true

如何实现3,4和5？

我的控制设置如下所示：

My control settings look like below:

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

        }
    });

推荐答案

也许这可以帮到你。这很好用。

Maybe this can help you. It works fo me fine.

$('#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();
  });
});

这篇关于处理选择性下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！