README

A jQuery 插件自动完成

安装

	composer require gozoro/jquery-autocompleter

用法

使用变体数组

<input id="autocompleter" name="country" type="text" class="form-control"  value="" autocomplete="off" />
<script>
	$(document).ready(function()
	{
		var items = [
			"Afghanistan",
			"Albania",
			"Algeria",
			"Andorra",
			"Angola",
			"Antigua and Barbuda",
			"Argentina",
			"Armenia",
			"Australia",
			"Austria",
			"Azerbaijan"
		];

		$("#autocompleter").autocompleter(items);
	});
</script>';

使用 AJAX

<input id="autocompleter" name="city" type="text" class="form-control"  value=""/>
<script>
	$(document).ready(function()
	{
		var items = "script_get_items.php"; // script must be returns JSON with an variant array

		$("#autocompleter").autocompleter(items);
	});
</script>';

选项

maxResults

最大建议数量（0 - 无限制）。

默认：0。

minChars

建议的字符数的最小值。

默认：1。

delay

键盘输入延迟。

默认：500 毫秒。

ajaxData

该函数必须返回 AJAX 请求数据。在这里，您可以获取 AJAX 请求的附加参数。

默认

function(value)
{
	return {value:value};
}

• value - 输入搜索值

template

该函数必须返回用于与输入值比较的项目值。该函数的结果决定了输入字符串的匹配。

默认

function(item, index)
{
	return item;
}

• item - 变体列表的项目值。
• index - 变体列表的项目键。

value

该函数必须返回请求的值（当选择项目时）。此选项允许使用隐藏输入。当您想使用标识符而不是输入文本字符串时，可以使用此选项。

默认：从 template 选项返回的函数值。

示例

function(item, index)
{
	return index;
}

• item - 变体列表的项目值。
• index - 变体列表的项目键。

hiddenDefaultValue

隐藏输入的默认值。

默认：""。

row

该函数必须返回用于显示建议的值。您可以更改输出建议字符串的格式。

默认

function(item, index)
{
	return item;
}

• item - 变体列表的项目值。
• index - 变体列表的项目键。

示例

function(item, index)
{
	return '<span style="red">' + item + '</span>';
}

filter

函数必须返回布尔值。当一个变体必须包含在建议列表中时，此函数必须返回 true 而不是 false。

默认

function(item, index, inputValue, template)
{
	return ~template.toLowerCase().indexOf(inputValue.toLowerCase());
}

• item - 变体列表的项目值。
• index - 变体列表的项目键。
• inputValue - 当前输入值。
• template - template 选项的值。

事件

autocompleter:select

当从项目列表中选择一个项目时，触发此事件。

autocompleter:unselect

当从项目列表中取消选择一个项目时，触发此事件。

示例

<style>

.form-control.success{
	border-color: #3c763d;
	background-color: #dff0d8;
}
</style>


<input id="autocompleter" name="country" type="text" class="form-control"  value="" autocomplete="off" />
<script>
$(document).ready(function()
{
	var items = [
		"Afghanistan",
		"Albania",
		"Algeria",
		"Andorra",
		"Angola",
		"Antigua and Barbuda",
		"Argentina",
		"Armenia",
		"Australia",
		"Austria",
		"Azerbaijan"
	];

	$("#autocompleter").autocompleter(items)
	.on('autocompleter:select', function(event, data)
	{
		$(this).addClass('success');
		console.log('selected:', data.value, data.template);

	})
	.on('autocompleter:unselect', function(event){
		$(this).removeClass('success');
	});
});
</script>';