autocomplete
autocomplete属性是html5新增的属性MDN DOCS，它是用来在用户填写表单字段值时，帮助用户自动输入用户过去输入过的值。
jquery 实现
- 由于
autocomplete在移动端web表现的不太好，所以用jquery来手动实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
100%;
height: 100%;
margin: 0;
padding: 0;
}
.auto-ul{
180px;
margin: 0;
padding: 0;
position: absolute;
background-color: #9e9e9e;
text-align: center;
z-index: 999;
}
.auto-ul>li{
height: 20px;
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>
