支持搜索保存，删除等功能。代码如下：
演示：
http://www.1st1st.ga/search.html<!doctype html>
<html xmlns="
http://www.w3.org/1999/xhtml1"> <head>
<title>搜索</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=yes" />
<style type="text/css">
body {
text-align: center;
font: 85% "Microsoft Yahei", "微软雅黑", "黑体";
max-width: 400px;
}
input,
textarea,
select,
button {
border: 1px solid rgba(137, 179, 168, 214);
}
select {
position: fixed;
top: 12px;
}
button {
border: none;
background: rgba(245, 245, 245, 245);
padding: 5px;
width: 48%;
color: rgba(137, 179, 168, 214);
}
#main {
position: absolute;
width: 95%;
top: 50px;
background: rgba(250, 250, 250, 250);
padding: 4px;
display: none
}
.keywords {
padding-bottom: 4px;
border-bottom: 1px solid black;
}
li {
text-align: left;
}
.delete,
.uptop {
float: right;
}
</style>
<script type="text/javascript">
/* Powered by Kaike|2016/10/09 02:34:45 */
function createElements(g, i) {
for (var p in i) {
if (typeof p != "object") {
var a = document.createElement(p);
for (var j = 0; j < i[p].length; ++j)
if (i[p][j].length >= 2) {
a.setAttribute(i[p][j][0], i[p][j][1]);
} else {
for (var k in i[p][j])
a[k] = i[p][j][k];
}
}
}
return g.appendChild(a);
}
var search = function(f) {
var g = document.getElementById("search");
createElements(g, {
"textarea": [
["id", "query"],
["placeholder", "请输入搜索关键字"],
["onclick", "search.hideHis();"]
]
});
var o = createElements(g, {
"select": [
["id", "url"],
["onchange", "search.change(this);"]
]
});
createElements(o, {
"option": [{
"value": "
https://www.baidu.com/s?word=" }, {
"innerHTML": "百度"
}]
});
createElements(o, {
"option": [{
"value": "
https://m.sogou.com/web/searchList.jsp?keyword=" }, {
"innerHTML": "搜狗"
}]
});
createElements(o, {
"option": [{
"value": "
https://www.google.com.hk/s?q=" }, {
"innerHTML": "谷歌"
}]
});
createElements(g, {
"div": [
["id", "main"]
]
});
createElements(g, {
"br": []
});
createElements(g, {
"button": [{
"innerHTML": "搜索"
},
["onclick", "search.run();"]
]
});
createElements(g, {
"button": [{
"innerHTML": "清空"
},
["onclick", "search.reset();"]
]
});
createElements(g, {
"div": [
["id", "exit"],
["style", "padding:100%"]
]
});
var k = (typeof f == "undefined") ? 5 : f;
search.setCookie("save_size", k, 365);
};
search.run = function() {
var g = document.getElementById("query");
var u = document.getElementById("url");
if (g.value == "") {
alert("请输入搜索关键字");
return false;
}
var str = g.value.replace(/\>/g, ">").replace(/\</g, "<").replace(/\,/g, "%2C");
var hisqr = this.getCookie("history_query");
hisqr = hisqr.replace(str + ",", "");
this.setCookie("history_query", str + "," + hisqr, 365);
this.go(u.value, true);
};
search.reset = function(s) {
var g = document.getElementById("query");
g.value = typeof s == "undefined" ? "" : s;
};
search.hideHis = function() {
var p = document.getElementById("main");
var s = this.getCookie("history_query");
var f = this.getCookie("save_size");
s = s.split(",");
p.innerHTML = "";
if (s != "") {
p.style.display = "block";
} else {
p.style.display = "none";
}
for (var i = 0; i < s.length - 1; i++) {
if (i != f) {
var istr = s[i].length > 20 ? s[i].substring(0, 20) + "..." : s[i];
istr = istr.replace(/\%2C/g, ",");
r = createElements(p, {
"li": [
["class", "keywords"]
]
});
createElements(r, {
"span": [
["class", "keyword"],
["onclick", "search.add(" + i + ");"], {
"innerHTML": istr
}
]
});
createElements(r, {
"span": [{
"innerHTML": "✘"
},
["class", "delete"],
["onclick", "search.deletes(" + i + ");"]
]
}, true);
}
}
if ((s.length - 1) >= 1) {
createElements(p, {
"br": []
});
createElements(p, {
"span": [
["class", "all"],
["onclick", "search.deleteall();"], {
"innerHTML": "删除全部记录"
}
]
});
createElements(p, {
"span": [
["class", "uptop"],
["onclick", "search.exit();"], {
"innerHTML": "▲"
}
]
});
}
};
search.add = function(i) {
var g = this.getCookie("history_query");
g = g.split(",");
g = g[i].replace(/\>\;/ig, ">").replace(/\<\;/ig, "<").replace(/\%2C/g, ",");
this.reset(g);
}
search.deletes = function(s) {
var g = this.getCookie("history_query");
var p = g.split(",");
if (confirm("确认删除该搜索关键字？\n\r" + p[s].replace(/\>\;/ig, ">").replace(/\<\;/ig, "<").replace(/\%2C/g, ","))) {
g = g.replace(p[s] + ",", "");
this.setCookie("history_query", g, 365);
this.hideHis();
return true;
}
return false;
};
search.deleteall = function() {
if (confirm("确认删除全部历史记录？")) {
this.setCookie("history_query", "", 365);
this.hideHis();
return true;
}
return false;
}
search.exit = function() {
var g = document.getElementById("main");
g.style.display = "none";
}
search.change = function(p) {
this.go(p.value, false);
};
search.setCookie = function(name, value, expire, path, domain, secure) {
var time = new Date(),
cstr = "";
time.setDate(time.getDay() + expire);
cstr = name + "=" + encodeURIComponent(value) + "; ";
cstr += "Expires=" + time.toGMTString() + "; ";
cstr += "Path=" + ((typeof path == "undefined") ? "/" : path) + "; ";
cstr += "Domain=" + ((typeof domain == "undefined") ? window.location.host : domain) + "; ";
cstr += (typeof secure == "undefined") ? "" : "secure; ";
document.cookie = cstr;
};
search.getCookie = function(name) {
var ex = [],
bx = [];
ex = document.cookie.split("; ");
for (var i = 0, j = ex.length; i < j; i++) {
bx = ex[i].split("=");
if (bx[0] == name) {
return decodeURIComponent(bx[1]);
}
}
return "";
};
search.go = function(u, t) {
var s = document.getElementById("query");
if (t === true) {
window.location = u + encodeURIComponent(s.value);
}
}
window.onload = function() {
search(15);
var g = document.getElementById("exit");
g.onclick = function() {
search.exit();
};
//alert(document.body.innerHTML);
}
</script>
</head>
<body>
<div id="search"></div>
</body>
</html>