2023年7月9日发(作者：)

【项⽬】实现⽹页搜索框功能⼀、实现搜索框的部分代码【注：涉及api接⼝和中后台数据交互】1. 最终呈现形式：2. 代码实现：HTML⽂件中：

TS⽂件中：export class ProductListComponent implements OnInit { //图⽚懒加载 defaultImage = '../../../assets/img/'; 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 = '/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 { //数据持久化 ('页⾯刷新会触发这个⽣命周期函数'); var searchlist:any=('searchlist'); if(searchlist){ yList=searchlist; } //获得产品列表 tlist().subscribe(product => { ('productlist',product); var re = /:/gi; = product; = (function(item){ return (ng()).isOnSale == 'yes'; }) var listLength = ; var userID = rage('UserID'); for(var i = 0;i

⾃定义⽅法//1.改变页码触发的事件 onPageChange(number: number){ tPage = number; } //2.关闭⼴告条 public flag:boolean=false; close(){ =true; } // 3.搜索框提⽰功能 formatter = (result: string) => rCase(); search = (text$: Observable) => text$.pipe( debounceTime(200), distinctUntilChanged(), map(term => term === '' ? [] : (v => rCase().indexOf(rCase()) > -1).slice(0, 10)) ) //4.搜索框历史记录显⽰和数据持久化⽅法 //4.1

搜索函数 //在搜素框⾥调⽤的搜索函数 doSearch(){ //("输⼊的搜索词：",); if( == ''){ _s=[]; _s=[]; _s=[]; rue_s=[]; rue_raw_s=[]; rue_rep_s=[]; rue_str_s=[]; List1=[]; List1=tList; }else{ _s=[]; _s=[]; _s=[]; rue_s=[]; rue_raw_s=[]; rue_rep_s=[]; rue_str_s=[]; List1=[]; var temp = {parameters: {keyWord: }} return ( + 'Product/Search?keyWord=' + ify(temp)).subscribe(search => { = search; //('slist搜索数组：',) var re = /:/gi; for(var i = 0;i< ;i++){ //把json字符串转成对象 _s[i] = ([i].ng()); _(_s[i].supplierAds[0].m_title); _(_s[i].supplierAds[0].m_price); _(_s[i].supplierAds[0].m_); rue_raw_(_s[i].supplierAds[0].m_supplierOrderId); rue_rep_s[i] = rue_raw_s[i].replace(re,"-"); rue_str_s[i] = Url + rue_rep_s[i] + ''; for(let i=0;i<_;i++){ var item = { bgPictrue: '', local: '', price: '', title: '', id: 0 } rue = rue_str_s[i]; = _s[i]; = _s[i]; = _s[i]; = [i].id; (item); } } //("输⼊的搜索词：",); }) } } //在历史记录⾥调⽤的搜索函数 doSearch1(model:string){ //("输⼊的搜索词：", model); _s=[]; _s=[]; _s=[]; rue_s=[]; rue_raw_s=[]; rue_rep_s=[]; rue_str_s=[]; List1=[]; var temp = {parameters: {keyWord: model}} return ( + 'Product/Search?keyWord=' + ify(temp)).subscribe(search => { = search; //('slist搜索数组：',) var re = /:/gi; for(var i = 0;i< ;i++){ //把json字符串转成对象 _s[i] = ([i].ng()); _(_s[i].supplierAds[0].m_title); _(_s[i].supplierAds[0].m_price); _(_s[i].supplierAds[0].m_); rue_raw_(_s[i].supplierAds[0].m_supplierOrderId); rue_rep_s[i] = rue_raw_s[i].replace(re,"-"); rue_str_s[i] = Url + rue_rep_s[i] + '.jpg'; for(let i=0;i<_;i++){ var item = { bgPictrue: '', local: '', price: '', title: '', id: 0 } rue = rue_str_s[i]; = _s[i]; = _s[i]; = _s[i]; = [i].id; (item); } } //("输⼊的搜索词：", model); }) } //4.2

存储函数 doStorage(){ //if语句检查输⼊的值在列表中是否存在，如果=-1说明不存在，则需要push进去 if(f()==-1 && !=''){ ();//理解push是什么意思 } //⾃动清空搜索框⾥填⼊的内容 =''; //获取属性的值 (); //缓存数据,实现数据持久化 ('searchlist',yList); } //4.3

接听回车事件，⼀按回车就把输⼊的内容push到列表中(此⽅法暂时不⽤) //了解对象怎么表⽰ doAdd(e){ if (e==13) { //这⾥判断数据是否存在不可⾏，如果是⼀个对象，所以需要封装⼀个⽅法 if(!yListHasKeyword(yList,)){ () =''; }else{ =''; } } //缓存数据，实现数据持久化 ('searchlist',yList);//⽤到this⼀定要注意this的指向 } //封装⽅法 //如果数组⾥⾯有keyword返回true，否则返回false historyListHasKeyword(historyList:any,model:any){ //⽤异步存在问题，所以⽤另⼀种⽅法，⽤到for循环 if (!model) return false; for (var i=0;i<;i++) { if (historyList[i]==model) { return true; } } return false; } //4.4

删除单个历史记录函数 deleteOneHistory(key){ (key,1);//splice可以在数组⾥删除，增加，修改⼀个值。在这⾥表⽰从key位置往后删除⼀个值。 ('searchlist',yList); } //4.5

⼀次性删除历史记录 deleteHistory(){ alert("删除全部历史记录？") (0,);//splice可以在数组⾥删除，增加，修改⼀个值。在这⾥表⽰从key位置往后删除⼀个值。 ('searchlist',yList); }}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); 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; }⼆、参考资料：（存在的困难）三、后续完善搜索框功能2.搜索框按照商品标题进⾏搜索：使⽤indexof函数进⾏筛选；