一、实现搜索框的部分代码
【注：涉及api接口和中后台数据交互】 1. 最终呈现形式： 2. 代码实现： HTML文件中：
TS文件中：
export class ProductListComponent implements OnInit {
//图片懒加载
defaultImage = '../../../assets/img/ebarter.jpg';
protected:any;
rprice:any=[];
price:any=[];
title:any=[];
rtitle:any=[];
local:any=[];
rlocal:any=[];
bgPictrue:any=[];
bgPictrue_raw:any=[];
bgPictrue_rep:any=[];
bgPictrue_str:any=[];
bgPictrue_r:any=[];
bgPictrue_raw_r:any=[];
bgPictrue_rep_r:any=[];
bgPictrue_str_r:any=[];
awsImgUrl:string = 'https://s3.cn-north-1.amazonaws.com.cn/linda-trades-archive-1/';
public list:any;
//声明新的对象数组
public productList:any=[];
public currentPage:any;
public rlist:any;
public pObj:any=[];
public temp:any=[];
//搜索商品
price_s:any=[];
title_s:any=[];
local_s:any=[];
rlocal_s:any=[];
bgPictrue_s:any=[];
bgPictrue_raw_s:any=[];
bgPictrue_rep_s:any=[];
bgPictrue_str_s:any=[];
public pObj_s:any=[];
//搜索商品的定义
public slist:any;
//声明新的对象数组
public searchList1:any=[];
//2.搜索提示数组
states:any= [];
//3.定义属性进行双向数据绑
public model: any;
public historyList:any=[]; //定义的数组，存储输入的值
//3.使用服务,实例化，即初始化
// 初始化路由
constructor(
private product:ProductService,
private storageServe: StorageService,
private sanitizer:DomSanitizer,
public storage:StorageService,
private route: ActivatedRoute,
private router: Router,
private homeService: HomeService,
//搜索框
private http: HttpClient,
@Inject(API_CONFIG) private uri: string,
) { }
ngOnInit(): void {
//数据持久化
console.log('页面刷新会触发这个生命周期函数');
var searchlist:any=this.storage.get('searchlist');
if(searchlist){
this.historyList=searchlist;
}
//获得产品列表
this.product.productlist().subscribe(product => {
console.log('productlist',product);
var re = /:/gi;
this.list = product;
this.list= this.list.filter(function(item){
return JSON.parse(item.content.toString()).isOnSale == 'yes';
})
var listLength = this.list.length;
var userID = this.storageServe.getStorage('UserID');
for(var i = 0;i this.pObj[i] = JSON.parse(this.list[i].content.toString()); this.title.push(this.pObj[i].supplierAds[0].m_title); this.price.push(this.pObj[i].supplierAds[0].m_price); this.local.push(this.pObj[i].supplierAds[0].m_supplierInfo.region); this.bgPictrue_raw.push(this.pObj[i].supplierAds[0].m_supplierOrderId); this.bgPictrue_rep[i] = this.bgPictrue_raw[i].replace(re,"-"); this.bgPictrue_str[i] = this.awsImgUrl + this.bgPictrue_rep[i] + '1000.jpg'; this.bgPictrue.push(this.bgPictrue_str[i]) } console.log(111,this.title) //重新创建一含对象的数组，把原来的各个属性的数组动态循环进新数组的对象里 //console.log(11,this.pObj[0]) for(let i=0;i var item = {//创建新数组的对象属性 bgPictrue: '', local: '', price: '', title: '', id: 0 } //对对象属性进行实例化赋值 item.bgPictrue = this.bgPictrue[i]; item.local = this.local[i]; item.price = this.price[i]; item.title = this.title[i]; item.id = this.list[i].id; //动态循环进数组里 //全部商品列表 this.productList.push(item); } //2.给搜索提示数组赋值 for(var i = 0;i this.states[i] = this.title[i]; } this.searchList1=this.productList; }) } // 自定义方法 //1.改变页码触发的事件 onPageChange(number: number){ this.currentPage = number; } //2.关闭广告条 public flag:boolean=false; close(){ this.flag=true; } // 3.搜索框提示功能 formatter = (result: string) => result.toUpperCase(); search = (text$: Observable text$.pipe( debounceTime(200), distinctUntilChanged(), map(term => term === '' ? [] : this.states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)) ) //4.搜索框历史记录显示和数据持久化方法 //4.1 搜索函数 //在搜素框里调用的搜索函数 doSearch(){ //console.log("输入的搜索词：",this.model); if(this.model == ''){ this.price_s=[]; this.title_s=[]; this.local_s=[]; this.bgPictrue_s=[]; this.bgPictrue_raw_s=[]; this.bgPictrue_rep_s=[]; this.bgPictrue_str_s=[]; this.searchList1=[]; this.searchList1=this.productList; }else{ this.price_s=[]; this.title_s=[]; this.local_s=[]; this.bgPictrue_s=[]; this.bgPictrue_raw_s=[]; this.bgPictrue_rep_s=[]; this.bgPictrue_str_s=[]; this.searchList1=[]; var temp = {parameters: {keyWord: this.model}} return this.http.get(this.uri + 'Product/Search?keyWord=' + JSON.stringify(temp)).subscribe(search => { this.slist = search; //console.log('slist搜索数组：',this.slist) var re = /:/gi; for(var i = 0;i< this.slist.length;i++){ //把json字符串转成对象 this.pObj_s[i] = JSON.parse(this.slist[i].content.toString()); this.title_s.push(this.pObj_s[i].supplierAds[0].m_title); this.price_s.push(this.pObj_s[i].supplierAds[0].m_price); this.local_s.push(this.pObj_s[i].supplierAds[0].m_supplierInfo.region); this.bgPictrue_raw_s.push(this.pObj_s[i].supplierAds[0].m_supplierOrderId); this.bgPictrue_rep_s[i] = this.bgPictrue_raw_s[i].replace(re,"-"); this.bgPictrue_str_s[i] = this.awsImgUrl + this.bgPictrue_rep_s[i] + '1000.jpg'; for(let i=0;i var item = { bgPictrue: '', local: '', price: '', title: '', id: 0 } item.bgPictrue = this.bgPictrue_str_s[i]; item.local = this.local_s[i]; item.price = this.price_s[i]; item.title = this.title_s[i]; item.id = this.slist[i].id; this.searchList1.push(item); } } //console.log("输入的搜索词：",this.model); }) } } //在历史记录里调用的搜索函数 doSearch1(model:string){ //console.log("输入的搜索词：", model); this.price_s=[]; this.title_s=[]; this.local_s=[]; this.bgPictrue_s=[]; this.bgPictrue_raw_s=[]; this.bgPictrue_rep_s=[]; this.bgPictrue_str_s=[]; this.searchList1=[]; var temp = {parameters: {keyWord: model}} return this.http.get(this.uri + 'Product/Search?keyWord=' + JSON.stringify(temp)).subscribe(search => { this.slist = search; //console.log('slist搜索数组：',this.slist) var re = /:/gi; for(var i = 0;i< this.slist.length;i++){ //把json字符串转成对象 this.pObj_s[i] = JSON.parse(this.slist[i].content.toString()); this.title_s.push(this.pObj_s[i].supplierAds[0].m_title); this.price_s.push(this.pObj_s[i].supplierAds[0].m_price); this.local_s.push(this.pObj_s[i].supplierAds[0].m_supplierInfo.region); this.bgPictrue_raw_s.push(this.pObj_s[i].supplierAds[0].m_supplierOrderId); this.bgPictrue_rep_s[i] = this.bgPictrue_raw_s[i].replace(re,"-"); this.bgPictrue_str_s[i] = this.awsImgUrl + this.bgPictrue_rep_s[i] + '.jpg'; for(let i=0;i var item = { bgPictrue: '', local: '', price: '', title: '', id: 0 } item.bgPictrue = this.bgPictrue_str_s[i]; item.local = this.local_s[i]; item.price = this.price_s[i]; item.title = this.title_s[i]; item.id = this.slist[i].id; this.searchList1.push(item); } } //console.log("输入的搜索词：", model); }) } //4.2 存储函数 doStorage(){ //if语句检查输入的值在列表中是否存在，如果=-1说明不存在，则需要push进去 if(this.historyList.indexOf(this.model)==-1 && this.model!=''){ this.historyList.push(this.model);//理解push是什么意思 } //自动清空搜索框里填入的内容 this.model=''; //获取属性的值 console.log(this.model); //缓存数据,实现数据持久化 this.storage.set('searchlist',this.historyList); } //4.3 接听回车事件，一按回车就把输入的内容push到列表中(此方法暂时不用) //了解对象怎么表示 doAdd(e){ if (e.keyCode==13) { //这里判断数据是否存在不可行，如果是一个对象，所以需要封装一个方法 if(!this.historyListHasKeyword(this.historyList,this.model)){ this.historyList.push(this.model) this.model=''; }else{ this.model=''; } } //缓存数据，实现数据持久化 this.storage.set('searchlist',this.historyList);//用到this一定要注意this的指向 } //封装方法 //如果数组里面有keyword返回true，否则返回false historyListHasKeyword(historyList:any,model:any){ //用异步存在问题，所以用另一种方法，用到for循环 if (!model) return false; for (var i=0;i if (historyList[i]==model) { return true; } } return false; } //4.4 删除单个历史记录函数 deleteOneHistory(key){ this.historyList.splice(key,1);//splice可以在数组里删除，增加，修改一个值。在这里表示从key位置往后删除一个值。 this.storage.set('searchlist',this.historyList); } //4.5 一次性删除历史记录 deleteHistory(){ alert("删除全部历史记录？") this.historyList.splice(0,this.historyList.length);//splice可以在数组里删除，增加，修改一个值。在这里表示从key位置往后删除一个值。 this.storage.set('searchlist',this.historyList); } } CSS文件中： /* 搜索框部分 */ /* 设置搜索框的容器 */ .search-bar{ /* max-width: 400px; */ height: 40px; background-color:#bbb; border: 2px solid rgb(0, 99, 186) ; } /* 搜索文本框 */ .search-bar .searcch-inp{ min-width: 100px; /* min-width: 150px; */ height: 36px; /* 去掉边框 */ border: none; color:rgb(121, 121,121); } /* 易出按钮 */ .search-bar .out-btn{ color: rgb(0, 99, 186); } /* 搜索按钮 */ .search-bar .search-btn{ min-width: 100px; /* min-width: 120px; */ height: 38px; padding: 0; border: none; color: #fff; background:rgb(0, 99, 186); text-align: center; } .search-bar .search-btn:hover{ background:rgb(4, 51, 92); } /* 搜索图标样式 */ .search-bar .search-btn .material-icons{ vertical-align:bottom; margin-bottom: -1px; margin-right: 7px; } /* 清除整个历史记录按钮样式*/ .search-bar .delete-all-btn{ float: right; margin-right: 20px; color: rgb(0, 99, 186); background-color: #fff; border: none; font-weight: bold; } /* 清除单个历史记录按钮样式*/ .search-bar .delete-btn{ float: right; margin-right: 20px; background-color: #fff; color: rgb(112, 112, 112); border: none; padding: 0; width: 20px; height: 20px; } .search-bar .delete-btn .material-icons{ vertical-align:bottom; color: rgb(202,202, 202); } /* 下拉框的列表样式 */ .search-bar li{ color:rgb(121, 121,121); font-size: 13px; line-height: 25px; } .search-bar .history-title{ color:rgb(0, 99, 186); font-size: 18px; font-weight: bold; margin-bottom: 10px; } .search-bar ul{ margin-left: 20px; margin-top: 15px; } 二、参考资料： 1. input搜索框实时检索功能实现（超简单，核心原理请看思路即可）：https://blog.csdn.net/qq_39974331/article/details/80410032 2. 前端和中后台的数据交互（用到json数据） 参考资料如下： 「前端」Angular 中的数据交互（get jsonp post）：https://zhuanlan.zhihu.com/p/147852215 angular2——前后端交互：http://www.voidcn.com/article/p-aiycehtq-bms.html 3. 需要熟练使用API接口 4. 搜索框搜索时候的搜索值存储问题，以及需要点击两次搜索按钮才能在前端页面显示搜索的商品（存在异步问题） 参考资料——面试精选之Promise：https://juejin.cn/post/6844903625609707534 三、后续完善搜索框功能 1.前端搜索模糊搜索提示框： 功能参考链接：https://material.angular.io/components/autocomplete/examples 2.搜索框按照商品标题进行搜索： 使用indexof函数进行筛选；