jQuery Autocomplete自动完成实战

63 阅读 0 评论 42 点赞

我是靠谱客的博主高高冬瓜，最近开发中收集的这篇文章主要介绍jQuery Autocomplete自动完成实战，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天和大家分享下jQuery Autocomplete 实战技术，也就是输入框自动提示完成功能；

用户在输入一个字符串的部分内容时，生成下拉菜单实现输入框自动补全，给予用户选择；

大大节约了用户的输入时间，增加了良好的效果体验；

此编文章所使用的是jquery.autocomplete.js 2017的版本，对比了其他版本，我觉得此版本比较符合我的业务需求；

实现逻辑是一样的，我将分享出来，如有不规范处，多多指正。

JS和Demo下载路径：https://download.csdn.net/download/weixin_38407595/11990210

1.demo

2.实战常用项（本地）

3.实战（数据库读取）

SQL 使用模糊查询

4.API 参数常规设置

①常规设置

②事件功能设置（本地和Ajax）

③仅本地设置

> 用法

> 造型

> 响应格式

> 非标准查询/结果

1.demo

测试数据是本地js文件的，此demo是使用jquery.mockjax.js模拟发送ajax获取数据；

认真观察即可举一反三。

<!DOCTYPE html>
<html>
	<head>
		<title>Autocomplete Demo For Mockjax</title>
		<style>
			/* 下拉选项样式 */
			input { font-size: 14px; padding: 10px; border: 1px solid #CCC; display: block; margin: 20px 0; }
			.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
			.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
			.autocomplete-selected { background: #F0F0F0; }
			.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
			.autocomplete-group { padding: 2px 5px; }
			.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
		</style>
	</head>
	<body>
		<h3>自动完成演示</h3>
		
		<!-- 监听输入框 -->
		<input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;" />
		
		<!-- 提示的 -->
		<input type="text" name="country" id="autocomplete-ajax-x" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;" />

		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
		<script type="text/javascript" src="js/jquery.mockjax.js"></script>
		<script type="text/javascript" src="js/countries.js"></script>
		<script type="text/javascript">
		$(function() {
		//模拟发送Ajax获取数据
		var countriesArray = $.map(countries, function(value, key) {
			return {
				value: value,
				data: key
			};
		});
		$('#autocomplete-ajax').autocomplete({
			// serviceUrl: 'service/url',
			//回调函数或建议的查找数组，它可能是字符串数组，数据展示
			lookup: countriesArray,
			//当用户从列表中选择建议时调用的回调函数，选择数据后的操作
			onSelect: function(suggestion) {
				$('h3').html('你选中的是: ' + suggestion.value + ', ' + suggestion.data);
			},
			//用于自动将输入值更改为第一个建议
			onHint: function(hint) {
				$('#autocomplete-ajax-x').val(hint);
			},
		});

		});
		</script>
	</body>
</html>

2.实战常用项（本地）

此例子是用于常用频繁数据展示，比如朝代、地区等等；数量不多的，数据可写在js文件内。

<!DOCTYPE html>
<html>
	<head>
		<title>Autocomplete Demo for local</title>
		<style>
			input { font-size: 14px; padding: 10px; border: 1px solid #CCC; display: block; margin: 20px 0; }
			.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
			.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
			.autocomplete-selected { background: lightgray; }
			.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
			.autocomplete-group { padding: 2px 5px; }
			.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
		</style>
	</head>
	<body>
		<h3>朝代自动完成演示</h3>
		
		<input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;" />
		
		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
		<script type="text/javascript">
			$(function() {
				
				//自定义
				var array = new Array(
					'先秦',
					'秦朝',
					'西楚',
					'汉代',
					'三国',
					'两晋十六国',
					'南北朝',
					'隋代',
					'唐代',
					'五代十国',
					'北宋',
					'南宋',
					'辽代',
					'西夏',
					'金代',
					'元代',
					'明代',
					'南明',
					'清代',
					'民国',
				);
				$('#autocomplete-ajax').autocomplete({
					//数据
					lookup: array,
					//选择后事件
					onSelect: function(suggestion) {
						$('h3').html('你选中的是: ' + suggestion.value);
					},
					//
				});

			});
		</script>
	</body>
</html>

3.实战（数据库读取）

此例子是用手动输入自动模糊匹配数据库，返回结果集，渲染下拉框，高光标识关键字。

展示关键代码：

<input type="text" id="autocomplete-ajax"/>

		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
		<script type="text/javascript">
			//实战例子
			$(function() {
				$('#autocomplete-ajax').autocomplete({
					width: 400,
					serviceUrl: '../coins/queryC',
					params: $("#autocomplete-ajax").val(),
					paramName: "name",
                                        //select如果与建议相匹配，不自动选择，展示下拉框
                                        triggerSelectOnValidInput:false,
					transformResult: function(response) {
						//解析服务器传过来的json字符串
						var obj = $.parseJSON(response);
						return {
							// <数据下拉列表展示>
							suggestions: $.map(obj.list, function(dataItem) {

								// 展示数据拼接
								var show = dataItem.name;

								if (dataItem.age!=null) {
									let age = "-" + dataItem.age;
									show += age;
								}
								return {
									/**
									 * value:显示（默认） 
									 * tips：小明-10岁
									 * 
									 * name/age自定义名称
									 * 用来onSelect取值↓
									 */
									value: show,
									name: dataItem.name,
									age:dataItem.age
								};
							})
						};
					},
					//选择后的事件
					onSelect: function(suggestion) {
						$('h3').html('你选中的是: ' + suggestion.name + ', ' + suggestion.age);
					}
				});
			});


			
		</script>

SQL 使用模糊查询

排序按照不模糊、左模糊、右模糊、全模糊的方式排序，效果展示在下拉框可看到。

 <select id="QueryLike" resultType="com.platform.entity.UserEntity">
    SELECT
          ...
    FROM
        user u
    WHERE
        u. name LIKE CONCAT ('%',#{name},'%')
    ORDER BY
        (
            CASE
            WHEN u. name= #{name} THEN
                1
            WHEN u. name LIKE CONCAT ('%',#{name}) THEN
                2
            WHEN u. name LIKE CONCAT (#{name},'%') THEN
                3
            WHEN u. name LIKE CONCAT ('%',#{name},'%') THEN
                4
            ELSE
                0
            END
        )
  </select>

4.API 参数常规设置

以下内容为输入字段设置了自动完成功能，其中options是一个对象常量，用于定义要用于自动完成功能插件的设置。

下表显示了所有可用的选项设置。

语法：$(selector).autocomplete(options);

①常规设置

设置	默认	描述
noCache	false	布尔值，指示是否缓存建议结果
delimiter	可选	字符串或RegExp，用于拆分输入值，并将最后一部分用作建议查询。例如在您需要填写逗号分隔值列表时很有用。
minChars	1	触发自动建议所需的最少字符数
triggerSelectOnValidInput	true	布尔值，指示如果`select`与建议匹配，是否应触发
preventBadQueries	true	一个布尔值，指示如果没有返回结果，则是否应阻止将来的Ajax对具有相同根的查询。例如，如果未`Jam`返回任何建议，则将来不会以以下任何查询触发`Jam`
autoSelectFirst	false	如果设置为`true`，则显示建议时将选择第一项
beforeRender	可选	`function (container, suggestions) {}`在显示建议之前调用。您可以在显示建议DOM之前对其进行操作
formatResult	可选	`function (suggestion, currentValue) {}` 自定义函数以格式化建议容器中的建议条目
formatGroup	可选	`function (suggestion, category) {}` 自定义函数以格式化组标题
groupBy	可选	建议`data`对象的属性名称，应将结果分组
maxHeight	300	建议容器的最大高度（以像素为单位）
width	auto	建议容器的宽度（以像素为单位），例如：300，`flex`用于最大建议尺寸并`auto`采用输入字段宽度
zIndex	9999	“ z-index”用于建议容器
appendTo	可选	建议将被附加到的容器。默认值`document.body`。可以是jQuery对象，选择器或HTML元素。确保设置`position: absolute`或`position: relative`针对该元素
forceFixPosition	false	将建议的容器附加到正文时，建议会自动定位（请查看`appendTo`选项），在其他情况下，会呈现建议，但不应用定位。设置此选项可在其他情况下强制自动定位
orientation	bottom	所显示的建议垂直方向，可用值是`auto`，`top`，`bottom`。如果设置为`auto`，则建议的定位方式应使其靠近视口中间
preserveInput	false	如果为`true`，则在浏览建议时输入值保持不变
showNoSuggestionNotice	false	如果没有匹配结果，则显示通知标签
noSuggestionNotice	No results	没有匹配结果标签的文本或htmlString或Element或jQuery对象
onInvalidateSelection	可选	`function () {}`选择后更改输入时调用。`this`绑定到输入元素
tabDisabled	false	设置为true以在用户选项卡选择建议之后将光标留在输入字段中

②事件功能设置（本地和Ajax）

活动设定	功能说明
onSearchStart	`function (params) {}`在Ajax请求之前调用。`this`绑定到输入元素
onHint	`function (hint) {}` 用于将输入值自动更改为第一建议
onSearchComplete	`function (query, suggestions) {}`在处理Ajax响应之后调用。`this`绑定到输入元素。`suggestions`是包含结果的数组
transformResult	`function(response, originalQuery) {}`查询结果准备好后调用。将结果转换为response.suggestions格式
onSelect	`function (suggestion) {}`用户从列表中选择建议时调用的回调函数。`this`内部回调是指输入HtmlElement。
onSearchError	`function (query, jqXHR, textStatus, errorThrown) {}`如果Ajax请求失败，则调用。`this`绑定到输入元素
onHide	`function (container) {}` 在容器将被隐藏之前调用

③仅本地设置

设置	默认	描述
serviceUrl	不适用	返回serviceUrl字符串的服务器端URL或回调函数
type	GET	Ajax请求类型以获取建议
dataType	text	从服务器返回的数据类型。要么`text`，`json` 或者`jsonp`，这将导致自动完成使用JSONP。使用jsonp时，您可能会在回调中返回json对象
paramName	query	包含查询的请求参数的名称
params	可选	随请求传递的其他参数
deferRequestBy	0	延迟Ajax请求的毫秒数
ajaxSettings	可选	任何其他配置jQuery Ajax请求的Ajax设置

> 用法

HTML：

• Ajax查找：

$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

• 本地查找（无Ajax）：

var countries = [
    { value: 'Andorra', data: 'AD' },
    // ...
    { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

• 自定义查找功能：

$('#autocomplete').autocomplete({
    lookup: function (query, done) {
        // Do Ajax call or lookup locally, when done,
        // call the callback and pass your results:
        var result = {
            suggestions: [
                { "value": "United Arab Emirates", "data": "AE" },
                { "value": "United Kingdom",       "data": "UK" },
                { "value": "United States",        "data": "US" }
            ]
        };

        done(result);
    },
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

> 造型

• 生成的建议HTML标记显示如下。您可以按照自己的方式设置样式。

<div class="autocomplete-suggestions">
    <div class="autocomplete-group"><strong>NHL</strong></div>
    <div class="autocomplete-suggestion autocomplete-selected">...</div>
    <div class="autocomplete-suggestion">...</div>
    <div class="autocomplete-suggestion">...</div>
</div>

• 样式样本：

> 响应格式

• 来自服务器的响应必须采用以下JavaScript对象的JSON格式：

{
    //从1.2.5版本开始，不再需要
    "query": "Unit",
    "suggestions": [
        { "value": "United Arab Emirates", "data": "AE" },
        { "value": "United Kingdom",       "data": "UK" },
        { "value": "United States",        "data": "US" }
    ]
}

• 数据可以是任何值或对象。数据对象传递给formatResults函数和onSelect回调。或者，如果没有数据，则可以仅提供一个字符串数组以获取建议：

{
    "query": "Unit",
    "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
}

> 非标准查询/结果

• 如果您的Ajax服务期望查询采用不同的格式，并且返回的数据格式与标准响应不同，那么您可以提供“paramName”和“transformResult”选项:

$('#autocomplete').autocomplete({
    paramName: 'searchString',
    transformResult: function(response) {
        return {
            suggestions: $.map(response.myData, function(dataItem) {
                return { value: dataItem.valueField, data: dataItem.dataField };
            })
        };
    }
})

最后

以上就是高高冬瓜为你收集整理的jQuery Autocomplete自动完成实战的全部内容，希望文章能够帮你解决jQuery Autocomplete自动完成实战所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Web
浏览次数：63 次浏览
发布日期：2023-09-23 03:25:39
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzocfw_13__7__22_x.html

jQuery Autocomplete自动完成实战

概述

1.demo

2.实战常用项（本地）

3.实战（数据库读取）

SQL 使用模糊查询

4.API 参数常规设置

①常规设置

②事件功能设置（本地和Ajax）

③仅本地设置

> 用法

> 造型

> 响应格式

> 非标准查询/结果

最后

评论列表共有 0 条评论

发表评论取消回复

jQuery Autocomplete自动完成实战

概述

1.demo

2.实战常用项（本地）

3.实战（数据库读取）

SQL 使用模糊查询

4.API 参数常规设置

①常规设置

②事件功能设置（本地和Ajax）

③仅本地设置

> 用法

> 造型

> 响应格式

> 非标准查询/结果

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复