Select 下拉菜单

本框架对原生的select元素做了尽可能的美化处理，不加任何js依然表现出色。本框架对表单元素默认设置为宽100%，用户根据需要设置宽度。

本框架的select默认高度是38px，可使用的尺寸有ax-xs(18px)，ax-sm(28px)和ax-lg(48px)。

原生的下拉菜单不美观，而且在不同浏览器下有不同显示结果，为了保持风格统一改进体验，本框架摒弃了臃肿的choices.js（v9.0.1），原生开发了select下拉选择插件，主要功能如下：

• 支持多种数据源，包括select、ul+li、datalist节点数据，本地json数据和异步json和sql数据
• 支持单选和多选
• 支持input模式添加、编辑和删除操作
• 支持四种尺寸，xs、sm、md和lg，以配合构建不同风格的表单
• 支持自动宽度和自定义宽度
• 支持模糊检索和精确检索
• 支持一维数组和二维数组，二维数组可对数据列表进行分组显示
• 可保存当前selected数据，初始化后展示保存前的selected状态
• 支持创建新选项和删除旧选项
• 支持新增selected项和移除selected项

插件运行方式有两种：

• ax*属性：对input或select标签使用axSelect属性即可按默认参数运行插件。
• js实例：通过new axSelect('#ID')方式创建实例运行。

如果要设置选中有三个方法：

• 1、如果是从树节点获取数据，那么在选项写上selected属性即可
• 2、如果通过json获取数据那么可设置selected:true即可
• 3、通过参数selected设置禁用项，selected参数可使用的值如下：
• 一个数字，将从数据id进行查找
• 一个字符串包含带英文逗号的字符串，将分别从id、label和value进行查找
• 一个对象，类似{id:0,label:'北京'}，将以比对属性值的方式进行查找
• 一个数组，数组中每一项可以是以上三种类型

如果需要禁止触发展开下拉菜单，可使用参数readonly:true。

如果要禁用选项有三个方法：

• 1、如果是从树节点获取数据，那么在选项写上disabled属性即可
• 2、如果通过json获取数据那么可设置disabled:true即可
• 3、通过参数disabled设置禁用项，disabled参数可使用的值如下：
• 一个数字，将从数据id进行查找
• 一个字符串包含带英文逗号的字符串，将分别从id、label和value进行查找
• 一个对象，类似{id:0,label:'北京'}，将以比对属性值的方式进行查找
• 一个数组，数组中每一项可以是以上三种类型

数据列表每一项均有label和value属性，其中label属性是必须的，如果没有value那么将以label值作为value值进行输出；大多数情况label与value只是对应关系，并不一定是一致的，可以自定义value值。默认回显label值，如果需要指定回显属性可设置displayProp，例如displayProp:'value'

一条完整的选项可编辑的数据属性如下：

• id：自定义选项的id，如果不填则有插件自动生成，自动生成的第一项id随参数idStart
• label：自定义选项的可见文本，最终呈现在选项左侧
• value：自定义选项的value值，如果不填将等于label
• tip：自定义选项的提示文本，最终呈现在选项右侧
• legend：自定义选项的图标，为class类，例如“ax-icon-star”
• image：自定义选项的小图片，为图片地址
• selected：设置选项的默认selected状态
• disabled：设置选项的默认disabled状态

数据渲染完毕还会自动添加上node（数据源的项目节点）和dom（下拉列表项目节点）属性。

本插件可绑定两种节点元素，分别是select和input。绑定select之后将直接从select的选项中获取数据；而绑定input则需要从外部获取数据，插件绑定input则自动是多选模式。以上演示了select绑定插件，以下演示input绑定插件。

对于绑定select元素而言，option使用optgroup包裹即可实现分组。

如果从ul+li获取数据，通过ul+li的父子关系也自然形成分组；如果从datalist获取数据，datalist若存在optgroup节点也可形成分组；如果从json取得数据，如果有children属性也会形成分组。

对于绑定select元素而言，对select使用multiple属性即可实现多选；对于绑定input元素而言，则自动是多选。可配合常用参数使用：

• least:至少选择几项，默认不限制，一般不用
• most:最多能选几项，默认不限制

本插件支持多种数据源：

• 1、物理节点数据，可从select、ul+li和datalist中获取数据，通过content参数设为#id、.classname或节点
• 2、将当页的json数组数据，有children属性将被定义为parent对象，通过content设置json文件地址，并将async参数设为true
• 3、异步的json文件或sql数据库数据，有children属性将被定义为parent对象，通过content设置j动态页面地址，并将async参数设为true

本数据中的可设置属性包括id、label、value、tip、selected、disabled、children、legend和image；通常id由插件自动创建；如果使用了children属性表名该节点将作为分组父节点存在。

以上示例已经演示了从select中获取数据，以下演示其他获得数据的方法。

下拉菜单默认宽度即是popup的默认宽度，如果需要自定义宽度有两个方法：

• 对select或input直接写上style样式，比如style="width:100px;"
• js调用的时候，对实例使用width参数，比如width:'100px'

如果同时使用了以上两个方法，则以参数width为准

使用search参数可配置搜索功能，其有多个属性：

• enable：是否开启搜索功能，默认是false，可使用true开启
• fuzzy：是否使用模糊搜索，默认true（input中的value将以空格分割多个关键字进行检索），可选择false精确搜索（input中的value将作为一个关键字进行检索）
• limit：是否限制检索结果数量，默认为0不限制，可自定义限制数量
• reorder：是否对检索结果按权重进行高低排序，默认false按原顺序，可选择true进行权重重排

如果绑定元素是input的话可设置search.enable，启用之后除了可进行检索之外还可编辑当前的selected值，通过delete删除键删除最后一项，通过enter回车键创建新的selected项。

当检索出列表时，回车键可将列表中的项添加为selected项（先用上下箭头移动到列表中）；当没有检索结果时可直接使用回车键将当前搜索框中的文本添加为selected项，这里便发生了一个问题，如果列表中的label是“上海”，搜索框中输入“上”或者“海”都能找出来这个条信息，此时使用回车键只能将“上海”添加为selected项，无法将“上”或者“海”添加为selected项；如果需要添加label中的子字符，需要禁用下拉列表的回车添加功能。

enterSelect参数的意思是在下拉列表中使用上下箭头选择项目之后可使用回车键将该项目添加为selected项，默认true，可通过设为false禁用。

如果绑定input，而且只希望使用关键字检索，不使用删除和添加等编辑功能，可将search.editable设为false。

如果不需要下拉菜单，只是绑定input进行手动添加和删除操作，可将参数dropdownShow设为false。