历史查询记录元素输入框实现示例

需求描述

在页面上添加查询框以显示历史搜索记录

实施和踩坑记录

使用带有输入建议的元素输入框来实现这一要求。使用方法见官网

1.Pit 1:在querySearch中不能直接返回数组，所以必须调用回调函数cb来处理数据

查看示例，我建议列表应该是一个数组，然后我在querySearch中直接返回了一个数组：

查询搜索(查询字符串，CB){返回JSON。解析(本地存储。getitem(' srcorderoarr ')}，但当我返回网页时，发现列表数据无法加载。

正确的姿势：

/* * *建议列表*/querysearch (querystring，CB){//调用回调返回建议列表{ 2 }的数据CB(JSON . parse(local storage . getitem(' srcordenoarr '))。pit 2:数组中的数据格式是必需的。格式必须是[{value: ' '，xxx3360''}，{value: ' '，xxx3360''}，]

该建议列表根据数组中的值属性值呈现，因此数组中的对象必须具有值键值对。例如，它是这样的：

data(){ return { srcOrderNoArr :[{value: ' '，//这必须有type:''}，{value: ' '，Type : ' ' }，{ value : ' '，Type 3: ' ' } } }方法： {/* * *将搜索记录保存在localstorage */setintostorage(类型){let self=this let no arr=[]，//订单号历史数组文本=' '，value='' switch(类型){ 0解析(localstorage。getitem(text)){//判断是否有本地存储if (localstorage)。getitem(文本)。xxx查询记录的索引(值)-1){//判断该查询记录是否已经存在，如果存在，则无需存储return } if(JSON . parse(local storage . getitem(text))。length=5){ let arr=JSON . parse(local storage . getitem(text))arr . pop()local storage . setitem(text，JSON . stringfy(arr))} local storage . setitem(text，JSON . stringfy(noarr . concat(JSON . parse(local storage . getitem(text))))else {//Create local storage . setitem(text，JSON.stringfy (noarr))}}以上就是本文的全部内容，希望对大家有所帮助