jquery插件实现搜索历史
每天一个jquery插件-做搜索历史，供大家参考，具体内容如下 效果如下 代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>做搜索历史</title> <script src="js/jquery-3.4.1.min.js"></script> <style> *{ margin: 0px; padding: 0px; } #searchbox{ /* border: 1px solid li
【JavaScript源代码】jQuery插件实现搜索历史
在网页开发中，用户经常需要进行搜索操作，而搜索历史功能能够提供方便，让用户快速访问之前的搜索记录。这篇文档将介绍如何使用jQuery来实现一个简单的搜索历史插件。这个插件旨在帮助开发者在网页中集成一个具有搜索历史展示功能的输入框。
我们需要引入jQuery库，如文档中所示，引用了jQuery的最新版本（3.4.1）：
```html
<script src="js/jquery-3.4.1.min.js"></script>
```
接下来是HTML结构，创建了一个包含搜索框和搜索按钮的容器：
```html
<div id="searchbox">
<input type="text" id="searchinput" />
<button id="searchbtn"><img src="search_icon.png" /></button>
<!-- 搜索历史显示区域 -->
<div id="morebox">
<div id="push"></div>
<div id="history">
<div class="head">搜索历史</div>
<div class="main"></div>
</div>
</div>
</div>
```
在CSS部分，定义了样式以增强用户体验，例如输入框和按钮的样式、搜索历史显示区域的布局等：
```css
#searchbox {
/* ... */
}
#searchinput {
/* ... */
}
#searchinput:focus {
/* ... */
}
#searchbtn {
/* ... */
}
#morebox {
/* ... */
}
.head {
/* ... */
}
.main {
/* ... */
}
```
在JavaScript中，我们需要监听输入框的`focus`和`input`事件，以便在用户开始输入时动态显示搜索历史。同时，还需要处理搜索历史的存储和加载，这可能涉及到浏览器的本地存储（localStorage）或者服务器端的数据交互。
```javascript
$(document).ready(function() {
var searchHistory = []; // 用于暂存搜索历史的数组
// 加载历史记录
function loadSearchHistory() {
// 从localStorage读取历史记录
var storedHistory = localStorage.getItem('search_history');
if (storedHistory) {
searchHistory = JSON.parse(storedHistory);
}
renderHistory();
}
// 渲染历史记录到页面
function renderHistory() {
$('#history .main').empty();
searchHistory.forEach(function(item, index) {
$('<div class="item">' + item + '</div>').click(function() {
$('#searchinput').val(item);
$(this).remove(); // 移除已选择的历史记录
}).appendTo('#history .main');
});
}
// 存储新的搜索记录
function saveSearchKeyword(keyword) {
if (searchHistory.indexOf(keyword) === -1) {
searchHistory.push(keyword);
// 限制历史记录数量，比如最多10条
if (searchHistory.length > 10) {
searchHistory.shift();
}
// 将更新后的历史记录存储到localStorage
localStorage.setItem('search_history', JSON.stringify(searchHistory));
}
}
// 监听输入框的焦点和输入事件
$('#searchinput').on('focus', function() {
$('#morebox').show();
}).on('input', function() {
var keyword = $(this).val();
if (keyword) {
saveSearchKeyword(keyword);
renderHistory();
} else {
$('#morebox').hide();
}
});
// 初始化
loadSearchHistory();
});
```
这个插件的基本思路是：当用户在搜索框中输入内容时，会实时保存到搜索历史数组，并更新到页面上。用户点击搜索历史中的任一记录，输入框会填充该记录并删除已选的历史项。搜索历史数据通过localStorage持久化，使得用户在下次访问时仍然可以看到之前的历史记录。
总结来说，这个jQuery插件实现了以下功能：
1. 监听输入框的焦点和输入事件，动态展示搜索历史。
2. 使用localStorage存储搜索历史，实现数据持久化。
3. 在搜索历史列表中点击历史记录，自动填充输入框并移除已选历史记录。
通过这样的插件，开发者可以轻松地为网站添加搜索历史功能，提高用户在搜索方面的体验。当然，实际应用中可能需要根据项目需求进行更复杂的定制，例如添加清除历史记录的按钮、优化搜索历史的展示样式等。
评论0