唯品秀前端博客
当前位置: 前端开发 > JavaScript > 最简单的方式让input输入框增强记忆模糊搜索功能

最简单的方式让input输入框增强记忆模糊搜索功能

2019-11-06 分类:JavaScript 作者:管理员 阅读(1871)

在有些时候我们希望通过input输入过的东西能在下次不需要再重新人工输入,节约时间成本,那么怎么实现呢?首先强调,本次要说的是增强input历史记忆功能,因为本身input原生就带有这类东西,只是不是那么好用。

需求效果图

原生自带

1
<input type="text" autocomplete="on">

input 的autocomplete属性默认是on,但某些浏览器还是需要你手动写上默认值才有效,其含义代表是否让浏览器自动记录之前输入的值,off:则关闭记录。该功能十分垃圾,交互让人诟病不已,每次必须提交刷新后才能记住存入历史,不推荐,垃圾。

原生基础上增强交互

我并不是说去改变autocomplete="on"的原生功能,而是通过另一种方式实现我们想要的效果,首先我们要准备一个输入时候出现下面那个下拉框可选性,那么这个东西其实原生是有的,并不需要我们去自己写,如下:

1
2
3
4
5
<input type="text" class="form-control" id="phone_number" value="1876487748" placeholder="请输入手机号码/imei/accid" list="cars">
<datalist id="cars">
  <option value="17314459887"></option>
  <option value="1876487748"></option>
</datalist>

动态缓存

上面已经做好了模型,但并不能实现动态记忆,而是写死的两个,很显然,我们需要用到本地缓存,将我们每次提交查询的值push到当前datalist的数据中去

1
2
3
4
5
6
7
8
9
10
11
// 提交之前先判断需不需要存储,如果当前数据中已经存在的,那么不去重复添加
var dataInput = $('#phone_number').val();
var locData = JSON.parse(localStorage.getItem('dataList'));
if (!locData || !locData.includes(dataInput)) {
  if (!locData) {
    localStorage.setItem('dataList', JSON.stringify([dataInput]));
  } else {
    localStorage.setItem('dataList', JSON.stringify(locData.concat([dataInput])));
  }
}
scope.addDataList();
1
2
3
4
5
6
7
8
9
10
11
12
13
// 通过jq将数据插入到datalist中
addDataList: function() {
  var opt = '';
  var locData = JSON.parse(localStorage.getItem('dataList'));
  if (locData.length > 15) {
    locData = locData.slice(locData.length - 15, locData.length);
  }
  console.log('locData', locData);
  for (var i = 0, len = locData.length; i < len; i++) {
    opt += '<option value="' + locData[i] + '">';
  }
  $('#cars').html(opt);
}

小结

通过datalist原生html标签省去了我们写jq交互的那一坨,缺点是样式不能自定义,谷歌浏览器样式很完美,其他浏览器样式着实不咋地。在特殊情况下我们是并不希望输入框有记忆功能的,因为这会涉及到当前用户隐私安全性问题,但存在必有价值,有些时候我们需要有这么个功能,但又不想去安装一个插件,那么此方法是个不错的选择。当然,你还可以继续封装,达到后端模糊搜索功能,这都是没问题的,并且一切是如此的简单。

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
2

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

0 条评论关于"最简单的方式让input输入框增强记忆模糊搜索功能"

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

  • 江吟辞(1周前 (06-29))

    好难坚持啊,我还没毕业,不知道啥时候才能像您一样厉害

    评:碎言碎语
  • 和我、恋爱吧(1周前 (06-29))

    怎么没见你更新呢,比较忙吗

    评:碎言碎语
  • 游离(1周前 (06-29))

    站主,你好!请教一下,前台的pc 端和移动端,你是怎么实现响应式的呢?媒体查询的同时写两套样...

    评:碎言碎语
  • 권지용(1周前 (06-29))

    最近在学习前端,看了博主很多文章,收益匪浅,感谢大佬

    评:碎言碎语
  • 白君也(1周前 (06-28))

    哇 自己制作的吗 在哪学的技术啊 好厉害

    评:碎言碎语
  • 管理员(3周前 (06-16))

    时间区间问题,因为目前是2020年,你所选不可能超出这个时间吧,当然,代码是根据你的业务来,...

    评:js时间戳完美转换成阴历农历格式

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 258 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 6 个
  • 评论总数: 902 条
  • 链接总数: 17 个
  • 标签总数: 459 个
  • 注册用户: 8220 人
  • 访问总量: 9212095 次
  • 最近更新: 2020年7月3日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线