dropdown

---

创建一个统一样式的下拉输入、选择框元素，或者解析转换页面上的 select 标签为该元素。

constructor

new(options?: DropdownOptions): Dropdown

options?: DropdownOptions

下拉输入、选择框的初始参数，结构为

interface DropdownOptions {
    textkey?: string;
    valuekey?: string;
    htmlkey?: string;
    maxlength?: Number;
    multiselect?: boolean;
    selected?: string;
    selectedlist?: Array<DropdownItem | any>;
    disabled?: boolean;
    input?: boolean;
    search?: boolean;
    searchkeys?: Array<string>;
    searchplaceholder?: string;
    tabindex?: Number;
    placeholder?: string;
    slidefixed?: boolean;
    parent?: HTMLElement;
}

textkey?: string

数据源中用以显示的属性，默认为 text

valuekey?: string

数据源中作为值的属性，默认为 value

htmlkey?: string

数据源中用来以 html 方式呈现的属性，默认为 html

maxlength?: Number

作为输入类型时的最大允许字符数，默认为 500

multiselect?: boolean

是否允许多选，仅在选择类型下有效

selected?: string

默认选中的项目的值

selectedlist?: Array<DropdownItem | any>

多选时默认选中的项目的值的列表

disabled?: boolean

初始化时下拉框是否禁用

input?: boolean

是否为输入类型

search?: boolean

是否允许搜索

searchkeys?: Array<string>

搜索时搜索的数据源属性的列表，默认为 [valuekey]

searchplaceholder?: string

搜索输入框的占位字符串

tabindex?: Number

下拉框的焦点顺序

placeholder?: string

作为输入类型时，输入框的占位字符串

slidefixed?: boolean

下拉方向是否固定为下

parent?: HTMLElement

下拉列表呈现的父容器，默认为 document.body

Dropdown.resolve

static resolve(dom?: HTMLElement): HTMLElement

dom?: HTMLElement

将把此 HTML 元素，为 null 则把 document.body 下的所有 select 元素解析为统一样式的下拉框

---

sourceFilter

sourceFilter: () => Array<DropdownItem | any>

数据源代理，返回用以呈现在下拉列表中的数据源

onselected

onselected: (item: DropdownItem | any) => void

item: DropdownItem | any

选中项发生改变时触发该事件，参数为选中的项

onselectedlist

onselectedlist: (list: Array<DropdownItem | any>) => void

list: Array<DropdownItem | any>

多选时选中列表发生改变时触发该事件，参数为选中的列表

onexpanded

onexpanded: () => void

下拉列表展开时触发该事件，一般用来异步获取服务器数据，填充至数据源

---

disabled

property disabled(): boolean

获取或设置下拉框是否禁用

source

property source(): Array<DropdownItem | any>

获取或设置下拉框数据源

multiselect

readonly multiselect: boolean

获取下拉框是否支持多选

selected

readonly selected: DropdownItem | any

获取下拉框当前选中项

selectedlist

readonly selectedlist: Array<DropdownItem | any>

获取下拉框当前选中的列表

---

create

create(): HTMLElement

创建下拉列表，返回一个 HTML 元素

select

select(selected: string, silence?: boolean): void

selected: string

修改下拉框的选中项为参数值对应的项

silence?: boolean

是否静默修改，为 true 时不触发 onselected 事件

selectlist

selectlist(selectedlist: Array<string>, silence?: boolean): void

selectedlist: Array<string>

修改下拉框的选中列表为参数值列表对应的项的列表

silence?: boolean

是否静默修改，为 true 时不触发 onselectedlist 事件

---

示例

<div id="dropdown-sample">
  <select>
    <option value="cs1">Case 1</option>
    <option value="cs2" selected>Case 2</option>
    <option value="cs3">Case 3</option>
  </select>
</div>

<script type="text/javascript">
  const Dropdown = window["lib-ui"].Dropdown;
  const sample = document.querySelector('#dropdown-sample');

  // 解析 select 元素
  Dropdown.resolve(sample);

  // 创建简易输入类型下拉框
  let drop = new Dropdown({
    input: true,
    // selected: 'standby',
    placeholder: 'asset status',
    slidefixed: true
  });
  drop.source = ['off', 'running', 'standby', 'broken']
    .map(it => { return { value: it, text: it } });
  sample.appendChild(drop.create());

  // 创建自定义显示元素的下拉框
  drop = new Dropdown({
    selected: '#ff0',
    search: true,
    // multiselect: true
  });
  drop.source = [
    { value: '#fff', text: 'White' },
    { value: '#f00', text: 'Red' },
    { value: '#0f0', text: 'Green' },
    { value: '#00f', text: 'Blue' },
    { value: '#ff0', text: 'Yellow' },
    { value: '#0ff', text: 'Cyan' },
    { value: '#f0f', text: 'Magenta' },
  ];
  drop.source.forEach(it => {
    const span = document.createElement('span');
    span.className = 'drop-item';
    span.style.setProperty('--color', it.value);
    span.innerText = it.text;
    it.html = span;
  });
  sample.appendChild(drop.create());
</script>