magicsuggestjs 可输入可选择下拉框记录

https://github.com/nicolasbize/magicsuggest

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;
}