其他分享
首页 > 其他分享> > Jquery 实现h5的autocomplete

Jquery 实现h5的autocomplete

作者：互联网

autocomplete

autocomplete属性是html5新增的属性MDN DOCS，它是用来在用户填写表单字段值时，帮助用户自动输入用户过去输入过的值。

jquery 实现


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			.auto-ul{
				width: 180px;
				margin: 0;
				padding: 0;
				position: absolute;
				background-color: #9e9e9e;
				text-align: center;
				z-index: 999;
			}
			
			.auto-ul>li{
				height: 20px;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" autocomplete="off" name="input1" />
		</div>
		<div>
			<input type="text" autocomplete="off" name="input2" />
		</div>

		<button type="button">提交</button>
	</body>
	<script src="../js/jquery.min.js"></script>
	<script>
		$(document).ready(function() {


			// 输入框点击事件,弹出历史输入值的提示框
			$("input").on("click", function() {
				var that = $(this);

				var session = JSON.parse(sessionStorage.getItem("test_session"));

				if (session) {

					$("body").off("click", clickEvent);

					var val = that.prop("name");

					var data = session[val];

					if (data) {
						updateUl(that, data);
					}
				}
			});

			// 提示框中显示的历史输入值的点击事件,点击自动填充
			$("body").on("click", ".auto-ul>li", function() {
				var that = $(this);
				var thatInput = that.parent().siblings("input");
				thatInput.val(that.html());

				$(".auto-ul").remove();
				$("body").off("click", clickEvent);

				// 获取焦点,让用户继续编辑
				thatInput.focus();

			});

			// 当用户输入时模糊匹配出历史值中对应的值
			$("input").on('input propertychange', function() {

				var that = $(this);
				var name = that.prop("name");

				var session = JSON.parse(sessionStorage.getItem("test_session"));

				if (session) {
					names = session[name];
					var result = fuzzySearch(names, "" + that.val());
					updateUl(that, result);

				}

			});

			// 提交以后将当前的值存到sessionStorage中
			$("button").click(function() {

				var input1 = $("input[name='input1']").val();
				var input2 = $("input[name='input2']").val();

				var session = JSON.parse(sessionStorage.getItem("test_session"));

				if (!session) {
					session = {};
				}

				session["input1"] = insertSession(session["input1"], input1);
				session["input2"] = insertSession(session["input2"], input2);

				sessionStorage.setItem("test_session", JSON.stringify(session));

				$("input[name='input1']").val("");
				$("input[name='input2']").val("");
			});

			// 全局点击事件,如果点击的位置不是提示框中的值则关闭提示框
			var clickEvent = function(e) {
				if ($(e.target).parents('.auto-ul').length <= 0) {
					$(".auto-ul").remove();
					$("body").off("click", clickEvent);
				}

			}

			/** 向sessionStorage插入历史值
			 * @param {Object} array
			 * @param {Object} val
			 */
			function insertSession(array, val) {

				var arr = array;

				// sessionStorage当前字段为空,直接插入
				if (!arr) {
					arr = [];
					arr.push(val);
				} else {
					// 如果数组中存在当前值,则跳过
					if (!arr.includes(val)) {
						// 如果当前字段记录值小于五个则插入头部,否则从尾部移除再插入
						if (arr.length < 5) {
							arr.unshift(val);
						} else {
							arr.pop();
							arr.unshift(val);
						}
					}
				}
				return arr;
			}

			/** 更新历史取值列表
			 * @param {Object} ele
			 * @param {Object} data
			 */
			function updateUl(ele, data) {

				$(".auto-ul").remove();

				var element = '';
				element += '<ul class="auto-ul">';
				for (var i = 0; i < data.length; i++) {
					element += '<li>' + data[i] + '</li>';
				}
				element += '</ul>';

				ele.parent().append(element);

				var e = $("body").data("events");

				if (!e || !e["click"]) {
					setTimeout(function() {
						$("body").on("click", clickEvent);
					}, 100)
				}

			}

			/** 模糊查询匹配
			 * @param {Object} array 数组
			 * @param {Object} query 要查询的字符串
			 */
			function fuzzySearch(array, query) {
				var results = $(array)
					.map(function(i, v) {
						if (v.toLowerCase().indexOf(query.toLowerCase()) != -1) {
							return v
						}
					}).get();

				return results;
			}

		});
	</script>
</html>

标签：Jquery,function,name,val,h5,autocomplete,session,var,input
来源： https://www.cnblogs.com/chenjy1225/p/15423339.html