近来项目一直在迭代更新，没有什么新的东西做，所以拿出来一个搜刮的小模块分享下，功用就是输入关键字能出来相干字的遐想吧，删除一些字的时刻顺带能够保留上一段的遐想，从表面上来看，效果还罢了，这里分享给人人，能够供人人看看。
效果图以下，github链接在此search_demo
依据老例子，下面就直接写编写历程了
第一步：建立文件
建立响应的html，js，css文件，引入jquery。
第二步：引入文件，设置meta，编写html以及款式
html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--通用媒体查询-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="search.css">
<title>搜刮</title>
</head>
<body>
<div class="search_nav">
<input type="search" class="search_input searchProduct" placeholder="查找您须要的商品">
<div class="search_cancel">作废</div>
</div>
<div class="search_find">
<div class="search_history">
汗青搜刮
</div>
<div class="search_find_line">
<!--搜刮效果和搜刮汗青-->
</div>
</div>
<script src="jquery.js"></script>
<script src="search.js" type="application/javascript"></script>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
}
body{
background-color: #f5f5f9;
}
.search_nav{
width: 100%;
height: 45px;
position: fixed;
top:0;
left: 0;
background-color: #20232b;
}
.search_input{
float: left;
width: 75%;
height: 35px;
margin-left: 30px;
margin-top: 5px;
font-size: 15px;
text-indent: 30px;
border: 1px solid black;
border-radius: 40px;
outline: none;
}
input::-webkit-search-cancel-button {display: none;}
.search_cancel{
float: right;
width: 15%;
height: 100%;
color:white;
text-align: center;
line-height: 45px;
}
.search_find{
background:#fff;
line-height:42px;
margin-top: 45px;
}
.search_history{
padding-left:10px;
font-weight:700;
font-size:16px
}
.search_find_title{
display:block;
position:relative;
padding-left:15px;
padding-right:10px;
font-size:14px;
color:#8a8a8a;
width:100%;
box-sizing:border-box
}
.search_find_title:after{
content:'';
position:absolute;
top:0;
left:15px;
box-sizing:border-box;
width:92%;
height:1px;
color:#ddd;
border-bottom:1px solid #ddd;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:scaleY(.4);
transform:scaleY(.4)
}
固然了，这里面的款式款式什么的在本身现实项目中须要依据本身的项目来调解，不须要跟我这写的一样，主要的是逻辑部份。
第三步：编写js逻辑
平常情况下，我们在进入搜刮页面的时刻，大多数会涌现汗青搜刮，也就是搜刮纪录，我们起首须要的就是举行汗青搜刮的衬着，我这里汗青搜刮都是用localStorage举行存储，人人依据须要能够举行对应的存储或许猎取。
var history_search = [];//存储汗青搜刮数据
//猎取汗青搜刮数据,若没有则为空
if(localStorage.getItem("history_search")){
history_search = JSON.parse(localStorage.getItem("history_search"));//猎取汗青搜刮数据
}else{
history_search = [];
}
接下来在猎取了汗青纪录的前提下，我们要把汗青纪录衬着到页面上
//衬着汗青纪录
function setpage(){
var product_list = '';
//动态增加元素至页面上
if(history_search.length != 0){
$(".search_history").show();
if(history_search.length >= 10){
for(var i = 0; i < 10 ;i++){
product_list = '<a class="search_find_title">'+history_search[i]+'</a>';
$(".search_find_line").append(product_list);
}
}else{
for(var i = 0; i < history_search.length;i++){
product_list = '<a class="search_find_title">'+history_search[i]+'</a>';
$(".search_find_line").append(product_list);
}
}
}else{
$(".search_history").hide();
}
}
setpage();
这里我们须要注重的是，平常的汗青纪录不会是太多的，平常会显现前十条近来搜刮的，我这边在衬着的时刻做了截取，其实在存的时刻就应该去做推断，在超越10条或许划定条数的时刻我们只保留十条或许划定条数，然后在衬着的时刻就不须要再去截取了。
接下来须要做的处置惩罚就是在输入关键字的时刻，一些要求和缓存搜刮出来的提醒数据
var obj_arr = [];//要求效果
var timeout = 0;
var keyName = '';//搜刮关键字
var ajaxCache = {};//定义缓存对象(保留要求出来的数据)
这里我先把别的两个要领先提出来先写了，一个是衬着页面的要领，一个是推断字符串是不是为空的要领，这两个要领在接下来的逻辑中须要挪用。
//衬着页面要领
function setListPage(obj,no){
console.log(obj);
console.log(no);
ajaxCache = {};
obj_arr = obj;
$(".search_find_line").empty();
if(no == 1){
$(".search_history").hide();
}else{
$(".search_history").show();
}
var search_res = '';
for(var i = 0; i < obj.length;i++){
search_res = '<a class="search_find_title">'+obj[i]+'</a>';
$(".search_find_line").append(search_res);
}
}
//推断字符串是不是是为空
function isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
这里就是最主要的一部份了。
//当按钮被松开时，触发事宜
$('.searchProduct').keyup(function(evt){
//猎取到关键字
keyName = $(this).val();
//推断关键字是不是为空
if(isNull(keyName) == false || keyName != ''){
//若输入字符串不为空,则显现收集要求搜刮。
clearTimeout(timeout);
timeout = setTimeout(function(){
if(!!ajaxCache[keyName]){
//显现自动提醒框，给框里填关联词条的内容
setListPage(ajaxCache[keyName],1);
ajaxCache = {};
}else{
var sendData = {
"keyName":keyName
};
$.ajax({
type: "POST",
url: url,//我们自个的接口没法公然，人人能够用本身的。
data:JSON.stringify(sendData),
dataType: 'json',
success: function (data) {
console.log(data);
if(data){
if(data.data){
//显现自动提醒框，给框里填关联词条的内容
ajaxCache[keyName]=[];
ajaxCache[keyName]=data.data;//给缓存对象赋值
setListPage(data.data,1);
}
}
},
error: function (err) {
console.log(err);
}
});
}
},200);
}else{
//若输入字符串为空,则显现汗青搜刮。
ajaxCache = {};
if(history_search.length == 0){
//若数组为空,汗青搜刮不显现
$(".search_history").hide();
}else{
$(".search_history").show();
setListPage(history_search,2)
}
}
//手机端按下右下角的搜刮按钮的时刻触发事宜
if (evt.keyCode == 13) {
localStorage.setItem('search_keyName',keyName);
var count = 0;
//推断汗青搜刮中是不是已存在当前搜刮的关键字
for(var j = 0; j < history_search.length;j++){
if(keyName == history_search[j]){
count += 1;
}else{
count += 0;
}
}
//假如没有,则增加进汗青搜刮
if(count == 0){
history_search.unshift(keyName);
}
//这边缺乏的处置惩罚是汗青搜刮排序的题目。
localStorage.setItem("history_search",JSON.stringify(history_search));
window.location.href="";//跳转到搜刮效果页之类的页面
}
这就基本完成了，这里没有加一个搜刮效果页，在涌现提醒搜刮的时刻，应该在上增加点击事宜，以跳转到搜刮效果页之类的，这边能够依据本身的需求来处置惩罚。
