magicsuggestjs 可输入可选择下拉框记录
2017-02-21 09:27
281 查看
https://github.com/nicolasbize/magicsuggest
1.载入css和JavaScript文件
2.创建,将作为一个容器中的DOM元素
例如,在窗体,创建一个div或输入标签:
3.实例化
创建一个脚本来配置组件。例如:
属性
类型
默认值
开始版本
allowFreeEntries 允许用户进入非建议条目。
boolean
1.0
allowDuplicates 允许用户重新输入相同的条目多次。
boolean
2.1
ajaxConfig 指定Ajax调用所做的方式。
object
2.0.1
autoSelect 如果只有一个找到匹配的自动选择的结果。
boolean
1.0
beforeSend如果先于Ajax请求推出了自定义的jQuery函数。
function
2.1
cls 指定要应用到容器元素的额外的CSS类。
string
1.0
data 提供的条目来填充组合框。
object
1.0
dataUrlParams 加给Ajax调用additionals参数。
object
1.2
disabled 初始化处于禁用状态的组合。
boolean
1.0
disabledField 指定JSON属性定义了禁用的行为。
string
2.1
displayField 指定要用于显示的JSON属性。
string
1.0
editable 允许或阻止键盘交互。
boolean
1.0
expanded 设置为组合的起始状态。
boolean
1.0
expandOnFocus 自动扩展了重点组合。
boolean
1.0
groupBy 指定要用于分组的JSON属性。
string
1.1
hideTrigger 隐藏正确的触发器。
boolean
1.0
highlight 强调在组合的建议,键入的文本。
boolean
1.0
id 给人的组件中的特定标识符。
string
1.1
infoMsgCls 增加了一个类的文本信息。
string
1.1
inputCfg 增加属性输入DOM元素。
object
1.1
invalidCls 指定要使用的类样式无效条目。
string
1.0
matchCase 使用区分大小写的过滤器的数据。
boolean
1.0
maxDropHeight 定义有多高扩展组合框即可。
integer
1.0
maxEntryLength 定义字符免费条目的最大数量。
integer
1.1
maxEntryRenderer 设置了太长的条目的辅助信息。
function
1.1
maxSuggestions 定义了多少个项目的组合框可以显示一次。
integer
1.0
maxSelection 设置一个可选择的项目的限制。
integer
1.0
method 设置HTTP协议方法。
string
1.1
minChars 定义扩展组合之前的最少字符数量。
integer
1.0
minCharsRenderer设置了输入太短辅助消息。
function
1.1
name 在目前的形式使用。
string
1.2
noSuggestionText 是在没有找到匹配的显示文本。
string
1.1
placeholder 是当组合是空的显示的文本。
string
2.0
queryParam 限定通过AJAX发送的参数的名称。
string
2.1
renderer 将格式化组合的结果与自定义HTML。
function
1.1
required 确保至少一个选择已经取得进展。
boolean
1.1
resultAsString 显示的选择分隔的字符串。
boolean
1.1
resultAsStringDelimiter 规定了如何将字符串分隔。
string
2.1
resultsField 指定包含建议数据的JSON数据。
string
1.0
selectFirst 自动光标选中第一项。
boolean
2.1
selectionCls 修改方式的选择来看。
string
1.0
selectionContainer 指定了结果呈现。
element
2.1
selectionPosition 定义了所选项目应呈现。
string
1.0
selectionRenderer 定义所选项目应如何显示。
function
1.3
selectionStacked 可以叠加选择垂直。
boolean
1.0
sortDir 在给定方向排序的数据。
string
1.0
sortOrder 根据给定的属性字段排序数据。
string
1.0
strictSuggest 过滤掉不开始与给定的输入项。
boolean
1.3
style 增加了内嵌CSS到组件的容器。
string
1.1
toggleOnClick 扩展组件时,应点击。
boolean
1.3
typeDelay 设置在毫秒时间触发AJAX调用之前。
integer
1.2
useTabKey 使得标签表现得像输入。
boolean
1.0
useCommaKey 使得逗号表现得像输入。
boolean
1.0
useZebraStyle 呈现奇数行灰色阴影中。
boolean
1.0
value 设置了一个初始值。
object
1.0
valueField 指定要用于JSON的属性值。
string
1.0
vregex 设置条目的类型。
regex
2.0
vtype 需要一个条目到一个给定的类型相匹配。
string
2.0
方法
返回值
开始版本
addToSelection([object] objs, [boolean] silent) 增加项目的选择。
1.0
clear([boolean] silent) 选择项
1.0
collapse([boolean] silent) 组合
1.0
disable() 组合.
1.0
empty() 什么时候用户是打字
1.0
enable() 组合
1.0
expand() 该组件这种方法扩大了可能一直处于禁用状态的组件。
1.0
getData() 返回组合建议。
array
2.0
isDisabled() 返回的组件的状态。
boolean
1.0
isValid() 检查是否选择是有效的。
boolean
1.1
getDataUrlParams() 返回的AJAX请求设置额外的URL paramaters列表。
object
1.0
getName() 返回用于HTML表单提交的名称。
string
1.0
getSelection() 返回选定的JSON对象的数组。
array
1.0
getRawValue() 返回当前文本是由用户输入。
string
1.0
getValue() 返回包含只有选定的JSON值的数组。
array
1.0
removeFromSelection([object] objs, [boolean] silent) 从选择项目删除。
1.0
setData([array] cbItems)设置在组合中列出的对象。
1.3
setName([string] name) 设置要用于form提交的名称。
1.0
setSelection(object[]) 设置与对象的特定阵列的选择。
1.0
setValue([array] ids) 根据给定的值设置选择。
1.0
setDataUrlParams([object] params) 设置额外的AJAX请求参数。
1.0
事件
开始版本
beforeload(e, this)执行AJAX请求之前被运行。
1.0
blur(e, this) 当组件失去焦点运行。
1.0
collapse(e, this) 当组合折叠的时候被激发。
1.0
expand(e, this) 当组合扩展被触发。
1.0
focus(e, this) 当组合获得焦点被触发。
1.0
keydown(e, this, keyevent) 当组合键盘按下触发
1.0
keyup(e, this, keyevent) 当组合键盘弹起触发
1.0
load(e, this, records[]) 当AJAX请求结束进行触发。
1.0
selectionchange(e, this, records[]) 当用户改变了选择被触发。
1.0
triggerclick(e, this) 当用户改变了选择被触发。
1.0
不基于bootstrap要添加的样式
1.载入css和JavaScript文件
<link href="magicsuggest-min.css" rel="stylesheet"> <script src="jquery-min.js"></script> <script src="magicsuggest-min.js"></script>
2.创建,将作为一个容器中的DOM元素
例如,在窗体,创建一个div或输入标签:
<div id="magicsuggest"></div>
3.实例化
创建一个脚本来配置组件。例如:
$(function() { $('#magicsuggest').magicSuggest({ [...] // configuration options }); });
参数选项
属性类型
默认值
开始版本
allowFreeEntries 允许用户进入非建议条目。
boolean
true
1.0
allowDuplicates 允许用户重新输入相同的条目多次。
boolean
false
2.1
ajaxConfig 指定Ajax调用所做的方式。
object
{}
2.0.1
autoSelect 如果只有一个找到匹配的自动选择的结果。
boolean
true
1.0
beforeSend如果先于Ajax请求推出了自定义的jQuery函数。
function
{}
2.1
cls 指定要应用到容器元素的额外的CSS类。
string
''
1.0
data 提供的条目来填充组合框。
object
null
1.0
dataUrlParams 加给Ajax调用additionals参数。
object
{}
1.2
disabled 初始化处于禁用状态的组合。
boolean
false
1.0
disabledField 指定JSON属性定义了禁用的行为。
string
null
2.1
displayField 指定要用于显示的JSON属性。
string
'name'
1.0
editable 允许或阻止键盘交互。
boolean
true
1.0
expanded 设置为组合的起始状态。
boolean
false
1.0
expandOnFocus 自动扩展了重点组合。
boolean
false
1.0
groupBy 指定要用于分组的JSON属性。
string
null
1.1
hideTrigger 隐藏正确的触发器。
boolean
false
1.0
highlight 强调在组合的建议,键入的文本。
boolean
true
1.0
id 给人的组件中的特定标识符。
string
null
1.1
infoMsgCls 增加了一个类的文本信息。
string
''
1.1
inputCfg 增加属性输入DOM元素。
object
{}
1.1
invalidCls 指定要使用的类样式无效条目。
string
'ms-inv'
1.0
matchCase 使用区分大小写的过滤器的数据。
boolean
false
1.0
maxDropHeight 定义有多高扩展组合框即可。
integer
290
1.0
maxEntryLength 定义字符免费条目的最大数量。
integer
null
1.1
maxEntryRenderer 设置了太长的条目的辅助信息。
function
[...]
1.1
maxSuggestions 定义了多少个项目的组合框可以显示一次。
integer
null
1.0
maxSelection 设置一个可选择的项目的限制。
integer
10
1.0
method 设置HTTP协议方法。
string
'post'
1.1
minChars 定义扩展组合之前的最少字符数量。
integer
0
1.0
minCharsRenderer设置了输入太短辅助消息。
function
[...]
1.1
name 在目前的形式使用。
string
null
1.2
noSuggestionText 是在没有找到匹配的显示文本。
string
'...'
1.1
placeholder 是当组合是空的显示的文本。
string
[...]
2.0
queryParam 限定通过AJAX发送的参数的名称。
string
'query'
2.1
renderer 将格式化组合的结果与自定义HTML。
function
null
1.1
required 确保至少一个选择已经取得进展。
boolean
false
1.1
resultAsString 显示的选择分隔的字符串。
boolean
false
1.1
resultAsStringDelimiter 规定了如何将字符串分隔。
string
','
2.1
resultsField 指定包含建议数据的JSON数据。
string
'results'
1.0
selectFirst 自动光标选中第一项。
boolean
false
2.1
selectionCls 修改方式的选择来看。
string
''
1.0
selectionContainer 指定了结果呈现。
element
null
2.1
selectionPosition 定义了所选项目应呈现。
string
'inner'
1.0
selectionRenderer 定义所选项目应如何显示。
function
null
1.3
selectionStacked 可以叠加选择垂直。
boolean
false
1.0
sortDir 在给定方向排序的数据。
string
'asc'
1.0
sortOrder 根据给定的属性字段排序数据。
string
null
1.0
strictSuggest 过滤掉不开始与给定的输入项。
boolean
false
1.3
style 增加了内嵌CSS到组件的容器。
string
''
1.1
toggleOnClick 扩展组件时,应点击。
boolean
false
1.3
typeDelay 设置在毫秒时间触发AJAX调用之前。
integer
400
1.2
useTabKey 使得标签表现得像输入。
boolean
false
1.0
useCommaKey 使得逗号表现得像输入。
boolean
false
1.0
useZebraStyle 呈现奇数行灰色阴影中。
boolean
false
1.0
value 设置了一个初始值。
object
null
1.0
valueField 指定要用于JSON的属性值。
string
'id'
1.0
vregex 设置条目的类型。
regex
null
2.0
vtype 需要一个条目到一个给定的类型相匹配。
string
null
2.0
公共方法
方法返回值
开始版本
addToSelection([object] objs, [boolean] silent) 增加项目的选择。
1.0
clear([boolean] silent) 选择项
1.0
collapse([boolean] silent) 组合
1.0
disable() 组合.
1.0
empty() 什么时候用户是打字
1.0
enable() 组合
1.0
expand() 该组件这种方法扩大了可能一直处于禁用状态的组件。
1.0
getData() 返回组合建议。
array
2.0
isDisabled() 返回的组件的状态。
boolean
1.0
isValid() 检查是否选择是有效的。
boolean
1.1
getDataUrlParams() 返回的AJAX请求设置额外的URL paramaters列表。
object
1.0
getName() 返回用于HTML表单提交的名称。
string
1.0
getSelection() 返回选定的JSON对象的数组。
array
1.0
getRawValue() 返回当前文本是由用户输入。
string
1.0
getValue() 返回包含只有选定的JSON值的数组。
array
1.0
removeFromSelection([object] objs, [boolean] silent) 从选择项目删除。
1.0
setData([array] cbItems)设置在组合中列出的对象。
1.3
setName([string] name) 设置要用于form提交的名称。
1.0
setSelection(object[]) 设置与对象的特定阵列的选择。
1.0
setValue([array] ids) 根据给定的值设置选择。
1.0
setDataUrlParams([object] params) 设置额外的AJAX请求参数。
1.0
公共事件
事件开始版本
beforeload(e, this)执行AJAX请求之前被运行。
1.0
blur(e, this) 当组件失去焦点运行。
1.0
collapse(e, this) 当组合折叠的时候被激发。
1.0
expand(e, this) 当组合扩展被触发。
1.0
focus(e, this) 当组合获得焦点被触发。
1.0
keydown(e, this, keyevent) 当组合键盘按下触发
1.0
keyup(e, this, keyevent) 当组合键盘弹起触发
1.0
load(e, this, records[]) 当AJAX请求结束进行触发。
1.0
selectionchange(e, this, records[]) 当用户改变了选择被触发。
1.0
triggerclick(e, this) 当用户改变了选择被触发。
1.0
不基于bootstrap要添加的样式
.form-control { position:relative; display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; text-align: left; background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; }
相关文章推荐
- js实现可输入可选择的select下拉框
- 如何js中判断页面上选择框中输入的两个日期的差值小于31
- JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码
- js:可输入可选择的select下拉框,可及时匹配包含输入的内容(兼容ie)
- 关于树形弹出框选择JS和sql的记录
- js实现select组件的选择输入过滤代码
- js实现select组件的选择输入过滤代码
- 2年前写的js可输入可选的下拉框
- js根据输入内容自动填充下拉框
- js实现可输入的下拉框
- js前台页面定位选择下拉框,单选按钮
- 可输入下拉框,css+js实现
- js 可输入的下拉框
- 2、 excel 导出。这种输入方式,适合后台输出,不需要打开EXCEL文件,不需要选择输出路径,只是后台自己默默的记录EXCEL文件。
- js实现可输入的下拉框
- 用JS新增一条空白记录 然后输入数据
- 学习Discuz! X3.2记录:快速回复插件,通过js使选择的下拉列表填充到回帖内容中
- 记录下Js日期选择器并自动加入到输入框中
- 能够选择时间的 JS 日历时间输入控件
- 巧妙使用js让下拉框既可以选择又可以编辑