1
0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-09-03 07:32:51 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee
Files
bookshelfplus/bookshelfplus-frontend/views/component/searchbox.html

80 lines
2.9 KiB
HTML

<div class="searchBox">
<input id="searchInput" type="text" placeholder="只需两步:搜索、下载 就这么简单" /><!--
--><input id="searchButton" type="button" value="搜一下" />
</div>
<script>
// /**
// * 内容改变时并不会触发事件,但是在失去焦点的时候会触发。
// */
// $("#inputid").change(function () {
// console.log($(this).val());
// });
// /**
// * 只要文本类容发生改变,就会触发该事件
// */
// $("#inputid").bind("input propertychange", function () {
// console.log($(this).val());
// });
// // 搜索框文字改变事件(实时)
// $("#searchInput").bind("input propertychange", function () {
// if ($('#searchInput').val() !== "")
// $('#searchInput').val("这个功能还没做呢,再等等吧");
// });
// 搜索框获得焦点事件
$('#searchInput').focus(() => {
// $('#searchInput').val("");
$('#searchInput').attr('placeholder', "在这里输入您想搜索的电子书吧")
})
// 搜索框失去焦点事件
$('#searchInput').blur((that) => {
// $('#searchInput').val("");
$('#searchInput').attr('placeholder', "只需两步:搜索、下载 就这么简单")
})
// 文本框回车事件
$('#searchInput').keydown(function (e) {
var curKey = e.which;
if (curKey == 13) {
$("#searchButton").click();
return false;
}
});
// 搜索按钮点击事件
if (location.pathname == "/" || !(window.history && history.pushState)) {
// 首页 或者不支持 history.pushState
$('#searchButton').click(function () {
var searchBoxValue = $('#searchInput').val();
if (!searchBoxValue || searchBoxValue.trim() == "") {
searchBoxValue = "";
}
window.location.href = "./search?keyword=" + encodeURIComponent(searchBoxValue.trim());
});
} else {
// 搜索页
$('#searchButton').click(function () {
var searchBoxValue = $('#searchInput').val();
// 如果搜索内容未变化,则不搜索
if (keyword == searchBoxValue.trim()) return;
if (!searchBoxValue || searchBoxValue.trim() == "") {
history.pushState({}, "", "./search"); // 第二个参数为保留参数
} else {
keyword = searchBoxValue.trim();
history.pushState({}, "", "./search?keyword=" + encodeURIComponent(keyword));
doSearch(keyword);
}
});
window.addEventListener('popstate', function (event) {
var requestParams = getParams();
var keyword = (requestParams["keyword"] || "").trim();
var searchbox = document.getElementById("searchInput");
searchbox.value = keyword;
doSearch(keyword);
});
}
</script>