标签：Jquery function name val h5 autocomplete session var input
autocomplete
autocomplete属性是html5新增的属性MDN DOCS，它是用来在用户填写表单字段值时，帮助用户自动输入用户过去输入过的值。
jquery 实现
- 由于
autocomplete在移动端web表现的不太好，所以用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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。