自动提示，可多选的组件MagicSuggest

MagicSuggest

一、安装:

1.需求：

需要Bootstrap3和jQuery 1.8及以上版本支持

2.下载

点击https://github.com/nicolasbize/magicsuggest/zipball/master 下载压缩包，并解压至你的工程目录下。

3.使用

3.1复制下面的代码到你的代码中，路径替换为上面解压包所在的路径。确保magicsuggest-min.js在jQuery之后声明

<link href="assets/magicsuggest/magicsuggest-min.css" rel="stylesheet"> <script src="assets/magicsuggest/magicsuggest-min.js"></script>

备注：最好是在javascript的最后声明。

3.2创建Dom元素。div或者input标签。如下：

<div id="magicsuggest"></div>

3.3示例

$(function() { $('#magicsuggest').magicSuggest({ [...] // configuration options }); });

二、配置选项

名称	类型	描述	默认值
allowFreeEntries	boolean	允许用户输入非建议条目的数据	true
allowDuplicates	boolean	允许用户多次输入重复的条目	false
ajaxConfig	object	指定ajax调用的方式	{}
autoSelect	boolean	如果只找到一个匹配项，则自动选择结果。	true
beforeSend	function	在ajax请求之前启动了一个自定义jQuery函数。	{}
cls	string	指定一个附加的CSS类来应用于容器元素。	''
data	object	提供条目以填充组合框。	null
dataUrlParams	object	向ajax调用添加额外的参数。	{}
disabled	boolean	初始化禁用状态的组合	false
disabledField	string	指定定义禁用行为的JSON属性。	null
displayField	string	指定要用于显示的JSON属性	'name'
editable	boolean	启用或阻止键盘交互	true
expanded	boolean	设置组合的起始状态	false
expandOnFocus	boolean	自动扩展组合的焦点	false
groupBy	string	指定用于分组的JSON属性。	null
hideTrigger	boolean	隐藏了正确的触发	false
highlight	boolean	在组合的建议中强调输入的文本。	true
id	string	赋予组件一个特定的标识符。	null
infoMsgCls	string	向信息文本添加一个类	''
inputCfg	object	向input dom元素添加属性。	{}
invalidCls	string	指定用于样式化无效项的类	'ms-inv'
matchCase	boolean	使用区分大小写的方法过滤数据	false
maxDropHeight	Integer	定义扩展的combobox可以有多高。	290
maxEntryLength	integer	定义默认条目的最大字符数	null
maxEntryRenderer	function	为太长的条目设置助手消息	[...]
maxSuggestions	integer	定义组合框一次可以显示多少项	null
maxSelection	integer	设置可以选择的项的限制	10
method	string	设置HTTP协议方法。	'post'
minChars	integer	在扩展组合之前定义最小字符数	0
minCharsRenderer	function	为太短的输入设置助手消息。	[...]
name	string	用于当前表单	null
noSuggestionText	string	当未找到匹配项时显示的文本	'...'
placeholder	string	当组合为空时显示的文本	[...]
queryParam	string	定义通过ajax发送的参数的名称	'query'
renderer	function	使用自定义HTML格式化组合的结果	null
required	boolean	确保至少有一个选择。	false
resultAsString	boolean	将选择显示为分隔字符串	false
resultAsStringDelimiter	string	指定字符串将如何被分隔。	','
resultsField	string	指定包含建议数据的JSON属性。	'results'
selectFirst	boolean	自动将光标放在第一项上	false
selectionCls	string	修改选择的外观	''
selectionPosition	string	定义所选项目应在何处呈现。	'inner'
selectionRenderer	function	定义如何显示所选项。	null
selectionStacked	boolean	将垂直叠加选择。	false
sortDir	string	对给定方向的数据进行排序。	'asc'
sortOrder	string	根据给定的属性字段对数据进行排序	null
strictSuggest	boolean	筛选不从给定输入开始的条目。	false
style	string	将内联CSS添加到组件的容器中。	''
toggleOnClick	boolean	在单击时展开组件。	false
typeDelay	integer	在触发AJAX调用之前设置ms的时间	400
useTabKey	boolean	使tab键的行为像输入	false
useCommaKey	boolean	使逗号的行为像输入。	false
useZebraStyle	boolean	呈现奇数行，带有更多的灰色阴影。	false
value	object	设置一个初始值	null
valueField	string	指定要用于值的JSON属性。指定要用于值的JSON属性。	'id'
vregex	regex	调节条目的类型	null
vtype	string	需要一个条目来匹配给定的类型。	null

三、公共方法

名称	描述	默认返回类型
addToSelection([object] objs, [boolean] silent)	为选择添加项。
clear([boolean] silent)	清空选择项
collapse([boolean] silent)	折叠组合项
disable()	使组合项不起作用
empty()	清空用户输入的
enable()	使组合项起作用
expand()	展开该组件
getData()	获取组合项的内容	array
isDisabled()	返回组件的状态。	boolean
isValid()	检查选择是否有效。	boolean
getDataUrlParams()	返回为AJAX请求设置的额外URL参数列表。	object
getName()	返回用于HTML表单提交的名称。	string
getSelection()	返回选定的JSON对象数组。	array
getRawValue()	返回用户输入的当前文本。	string
getValue()	返回只包含所选JSON值的数组。	array
removeFromSelection([object] objs, [boolean] silent)	从选择中移除项。
setData([array] cbItems)	设置组合中列出的对象。
setName([string] name)	设置用于表单提交的名称
setSelection(object[])	用给定的对象数组设置选项。
setValue([array] ids)	根据给定的值设置选择。
setDataUrlParams([object] params)	为AJAX请求设置额外的参数。

五、公共事件

名称	描述
beforeload(e, this)	在执行AJAX请求之前被触发。
blur(e, this)	当组件失去焦点时被触发。
collapse(e, this)	当组合折叠时被触发。
expand(e, this)	当组合扩展时被触发。
focus(e, this)	当组合获得焦点时被触发。
keydown(e, this, keyevent)	当用户按下键时被触发。
keyup(e, this, keyevent)	在用户放开键时被触发。
load(e, this, records[])	在执行AJAX请求时被触发。
selectionchange(e, this, records[])	当用户更改选择时被触发。
triggerclick(e, this)	当用户更改选择时被触发。