data-selector

Dropdown component of data selecting

Usage

html

<input type="text" data-id="data-selector">

js

	var ds = new dataSelector({
		template: '<span>%:name%</span> - <span>[[%:gender%]]</span>',
		data: [
			{
				name: "Henry",
				age: 25
			},
			{
				name: "Chris",
				age: 25
			}
		]
	})

Configuration

• el: the element of DOM node to initialize the plugin
• template: used to display result list. %:key% can be used to be placeholder, it will be replaced by the value in data. [[placeholder]] can also be used to identify the highlight value. e.g. template: '[[%:name%]]' - %:age%. This option is required.
• data: all data to be filtered. This option is required.
• maxData: limit the number of selected item, -1 is default and means no limitation.
• maxResult: number of items in result list, default value is 5.
• resultScroll: the list can be scrolled or not, default value is false.
• filterKey: key for filter
• savedKey: key for saving selected item. Only one key can be supported. If an array is setting, it will only use the first value as savedKey.
• showKey: key for display selected item
• onSelect: callback function when click item in result list

Useful Methods

	var ds = new dataSelector();
	ds.setValue(arr)
	ds.getValue()
	ds.setData()
	ds.appendValue(arr)
	ds.clear()
	ds.destroy()
	ds.reset()

Changelog

v1.2.0

• Support multiple instances at same time.
• Remove some useless global variables.

v1.1.0

• Add API: setData