在项目开展过程中，业主提出页面输入框自带的历史记录功能不能贴合实际使用要求，遂考虑禁用input自带的历史记录功能(autocomplete=“off”)，开发一个公用的脚本适用当前需要。
需求如下：
1、历史记录按输入的时间倒序排列；
2、input输入内容变化时，自动匹配；
3、最多展示10条；
实现思路：
1、input输入框获取到焦点后，自动从localStorage中查询相应的数据，匹配输入内容，展示最新10条；
2、input输入框焦点移出后，判断是否移出历史记录选择区域，若超出，则关闭历史记录选择区域，并将输入内容记录到localStorage中(去空、去重)；
3、用户在历史记录选择区域中点击选择后，将选择内容赋值到input中，并更新localStorage；
效果如下：
代码如下：
var mouseX;var mouseY;$(function () {// 获取鼠标当前位置document.onmousemove = function (event) {if (navigator.userAgent.indexOf('Firefox') >= 0) {mouseX = event.clientX;//老版的火狐没有x,ymouseY = event.clientY;//老版的火狐没有x,y}else {mouseX = event.x;mouseY = event.y;}}$(".historyRecord").focus(function () {var cookie = getCookie(this.id + "History");if (this.oninput == null) {// input输入改变时，重新刷新匹配的历史记录this.oninput = function () {var cookieNew = getCookie(this.id + "History");if (cookieNew != null) {var array = cookieNew.split("|");if (array.length > 0) {var matchArray = new Array();if ($.trim(this.value) != "") {for (var i = 0; i < array.length; i++) {if (array[i].indexOf($.trim(this.value)) != -1) {matchArray.push(array[i]);}}}else {matchArray = array;}// 最多显示 10 条历史记录var maxIndex = matchArray.length > 10 ? 10 : matchArray.length;var showDiv = document.getElementById("div_" + this.id);if (maxIndex > 0) {var html = "";if (showDiv == null) {var left = getAbsoluteLeft(this.id);var top = getAbsoluteTop(this.id);var height = getElementHeight(this.id);html = "<div class='show_history' id='div_" + this.id + "' style='left: " + left + "px; top: " + (top + height) + "px; " +"background-color: #fff; border: 1px solid #ccc; border-radius: 4px; padding-top: 6px; padding-bottom: 6px; position: absolute; width: 200px; z-index: 99;'>";}for (var i = 0; i < maxIndex; i++) {html += "<div class='optionDiv' style='height: 30px; line-height: 30px; font-size: 13px; padding-left: 10px; z-index: 100;' οnmοuseοver='divOver(this)' οnmοuseοut='divOut(this)' οnclick='divClick(\"" + this.id + "\", \"" + matchArray[i] + "\")'>" + matchArray[i] + "</div>";}if (showDiv == null) {html += "</div>";$(this.parentNode).append(html);}else {// 清空原先的历史信息div，添加新的divdocument.getElementById("div_" + this.id).innerHTML = "";$("#div_" + this.id).append(html);}}else if (showDiv != null) {//若已展示历史记录，则删除历史记录展示DivshowDiv.remove();}}}};}//焦点捕获时，根据localstorage显示能够匹配的记录if (cookie != null) {var array = cookie.split("|");if (array.length > 0) {var matchArray = new Array();if ($.trim(this.value) != "") {for (var i = 0; i < array.length; i++) {if (array[i].indexOf($.trim(this.value)) != -1) {matchArray.push(array[i]);}}}else {matchArray = array;}// 最多显示10条历史记录var maxIndex = matchArray.length > 10 ? 10 : matchArray.length;if (maxIndex > 0) {var left = getAbsoluteLeft(this.id);var top = getAbsoluteTop(this.id);var height = getElementHeight(this.id);var html = "<div class='show_history' id='div_" + this.id + "' style='left: " + left + "px; top: " + (top + height) + "px; " +"background-color: #fff; border: 1px solid #ccc; border-radius: 4px; padding-top: 6px; padding-bottom: 6px; position: absolute; width: 200px; z-index: 99;'>";for (var i = 0; i < maxIndex; i++) {html += "<div class='optionDiv' style='height: 30px; line-height: 30px; font-size: 13px; padding-left: 10px; z-index: 100;' οnmοuseοver='divOver(this)' οnmοuseοut='divOut(this)' οnclick='divClick(\"" + this.id + "\", \"" + matchArray[i] + "\")'>" + matchArray[i] + "</div>";}html += "</div>";$(this.parentNode).append(html);}}}});$(".historyRecord").blur(function (event) {var out = true;var historyDiv = document.getElementsByClassName("show_history");if (historyDiv.length > 0) {//根据鼠标当前位置，判断鼠标是否移出输入框及历史记录区域var x1 = historyDiv[0].offsetLeft;var y1 = historyDiv[0].offsetTop;var x2 = historyDiv[0].offsetLeft + historyDiv[0].offsetWidth;var y2 = historyDiv[0].offsetTop + historyDiv[0].offsetHeight;var oTop = 0; //父元素定位的Topvar oLeft = 0; //父元素定位的Leftvar o = document.getElementsByClassName("show_history")[0];while (o.offsetParent != null) {var oParent = o.offsetParent;oTop += oParent.offsetTop // Add parent Top positionoLeft += oParent.offsetLeft // Add parent Left positiono = oParent}if ((mouseX - oLeft) >= x1 && (mouseX - oLeft) <= x2 && (mouseY - oTop) >= y1 && (mouseY - oTop) <= y2) {out = false}else {$(".show_history").remove();}}// 若移出，记录当前输入值到localStorage中if (out) {var cookie = getCookie(this.id + "History");if (cookie != null) {var array = cookie.split("|");if (array != null && array.length > 0) {if (array[0] != this.value && $.trim(this.value) != "") {array.remove(this.value);array.unshift(this.value);if (array.length > 100) {//设置最多保存100条历史记录array.pop();}setCookie(this.id + "History", array.join("|"));//转成字符串 }}else if ($.trim(this.value) != "") {setCookie(this.id + "History", this.value);}}else if ($.trim(this.value) != "") {setCookie(this.id + "History", this.value);}}});});function divOver(e) {//鼠标滑过，div背景变灰e.style.backgroundColor = "#ebebeb";}function divOut(e) {//鼠标滑出，div背景变白e.style.backgroundColor = "white";}function divClick(id, value) {//鼠标点击document.getElementById(id).value = value; //e.innerText; //根据点击内容赋值到input中$("#div_" + id).remove(); //移除历史记录div$("#" + id).blur();//记录新的历史记录}//设置localStoragefunction setCookie(name, value) {var urlSplit = window.location.href.split('?')[0].split('/');//获取页面url, 根据url及name绑定localStoragelocalStorage.setItem(urlSplit[urlSplit.length - 1] + "_" + name, value);}//获取localStoragefunction getCookie(name) {var urlSplit = window.location.href.split('?')[0].split('/');//获取页面url, 根据url及name绑定localStoragereturn localStorage.getItem(urlSplit[urlSplit.length - 1] + "_" + name);}//获取控件左绝对位置function getAbsoluteLeft(objectId) {o = document.getElementById(objectId);oLeft = o.offsetLeft;//while (o.offsetParent != null) {// oParent = o.offsetParent// oLeft += oParent.offsetLeft// o = oParent//}return oLeft}//获取控件上绝对位置function getAbsoluteTop(objectId) {o = document.getElementById(objectId);oTop = o.offsetTop;//while (o.offsetParent != null) {// oParent = o.offsetParent// oTop += oParent.offsetTop // Add parent top position// o = oParent//}return oTop}//获取控件宽度function getElementWidth(objectId) {x = document.getElementById(objectId);return x.offsetWidth;}//获取控件高度function getElementHeight(objectId) {x = document.getElementById(objectId);return x.offsetHeight;}
依赖文件：jquery.cookie.js
