位置: 编程技术 - 正文

自动完成的搜索框javascript实现(自动搜索工具)

编辑:rootadmin

推荐整理分享自动完成的搜索框javascript实现(自动搜索工具),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:自动搜索搜索失败,自动搜索是什么意思,自动搜索结果,自动完成的搜索怎么关闭,自动搜索啊,自动搜索啊,自动完成的搜索怎么关闭,自动完成的搜索怎么关闭,内容如对您有帮助,希望把文章链接给更多的朋友!

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.

我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局.

界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮.

这就是最简单的搜索框的设计. 那CSS代码怎么处理. 以前用得多的是使用float来进行处理, 然后给搜索框一个边框,设置一个padding. 然后给按钮去除边框,设置一个背景. 这里我们使用flex布局方式. 这样更简便点. 不用考虑清除浮动效果.当然这里就要考虑兼容性问题了.

这时候我们继续往下考虑, 如果用户输入了关键词, 那就得显示一个列表的相关词语. 那这时候我们需要加入一个词语列表.比如

我们将这行代码追加到.search的内容后面.然后设置CSS代码, 我们设置他的最小宽度为.search宽度减去搜索按钮的宽度.这样就跟搜索框一样宽.

自动完成的搜索框javascript实现(自动搜索工具)

这得在CSS代码之前, 将默认的一些浏览器样式清除.最后效果如下.

好了.下面我们完成JS的代码控制.我们来分析下, 其中的事件. 用户在输入框输入文字后, 将输入的文字与后台数据做查询, 查询到后返回给客户端, 然后将返回的数据显示在数据列表下.

根据这个步骤, 我们首先是获取输入框标签, 给这个标签添加onkeyup事件

这里我们模拟一个后台数据, 这里用数据来表示,然后加入一些数据

后台数据有了, 事件也添加了. 这时候我们对数据进行处理了.首先是获取用输入的数据, 来然后与后台数据进行比较. 然后将比较后的数据保存在一个数据里面.

继续往下分析, 目前我们获取到后台查询到的数据后, 那就得将这个数据显示给用户查看, 这里我们显示在数据列表中.

在添加数据到列表中时, 我们首先对数据列表做初始化处理,避免重复数据的添加. 其次就是我们给数据列表的每一行添加了一个点击事件,点击后将数据放入搜索框内, 数据列表隐藏.

在这里整个自动完成的搜索框就完成了.我们来测试下效果.

这里可能是录制软件问题, 边框与它录制的背景颜色应该一样了. 边框不见了(⊙?⊙)b

标签: 自动搜索工具

本文链接地址:https://www.jiuchutong.com/biancheng/378986.html 转载请保留说明!

上一篇:js去字符串前后空格的实现方法(js字符串去掉最后两位)

下一篇:JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)(js的定时器函数)

  • 企业名称税号
  • 进出口贸易公司需要什么资质
  • 政府补助是否可以加计抵扣
  • 电子税务局能不能抄税
  • 残疾人保障金的计算方法
  • 公章未备案是否不合法
  • 企业注销其他应付款可以转入未分配利润吗
  • 印花税是当月交当月的吗
  • 增值税附加税由买方承担如何计算
  • 专用发票抬头一定要打完整吗
  • 同一个人可以在两个地方交社保吗
  • 销售货物并收取运费税率
  • 工程基建期的工作总结
  • 按折现率计算现值
  • 农业生产免税政策
  • 财税〔2017〕39号
  • 个体户发票冲红应该具备什么条件
  • 无形资产软件摊销年限的最新规定2021
  • 存货周转次数计算公式怎么理解
  • 所得税申报季末资产总额怎么填
  • 安装费的税费的会计分录
  • 外资公司办事处职能
  • 预提成本的会计处理
  • 如何清除上网记录?
  • 计提坏账准备的比例
  • php判断链表是否有环
  • macbook做bim
  • php字符串转浮点型
  • 圣克鲁斯岛战役
  • 安斯海滩上的角眼沙蟹,塞舌尔普拉兰岛 (© Ingo Schulz/Offset by Shutterstock)
  • php lcg_value与mt_rand生成0~1随机小数的效果对比分析
  • php pdo和mysqli
  • 在vue中获取dom元素
  • 深度学习|论文中常用的注意力模块合集(下)
  • 雪花算法workid
  • css中设置字体样式
  • PHP 实现等比压缩图片尺寸和大小实例代码
  • 产成品核算的内容
  • 律师事务所可不可以对外投资呢
  • 包工的人工费可以算工程款
  • 开票日期已超过开票截止日期是什么意思
  • 开具农产品收购发票需要什么资料
  • sql server 2008 R2安装
  • 哪些费用进项税额要转出
  • 资产减值损失属于什么科目
  • sql server 2008数据库密码忘记
  • 火车退票费如何开票
  • 无法收回的款项
  • 起征点与免征额的联系
  • 新企业购买税控盘,没收入,怎么抵扣
  • 汽修厂印花税怎么交
  • 装修费未计入长期费用
  • 新成立的公司开什么银行账户
  • 企业办理名称变更怎么办
  • 无发票临时工劳务费账务处理
  • 产品销售费用是什么科目
  • 期末未缴税额为正是什么意思
  • debian10配置ipv6地址
  • docker部署zookeeper集群
  • win10 右下角
  • win7任务栏透明调不了
  • win10锁屏界面的搜索怎么关
  • linux如何查看用户的信息
  • 开发环境配置是干嘛
  • 字符串反转C语言代码
  • javascript中的eval函数
  • 记录心率
  • python难度
  • unity反射效果
  • jquery读写文件
  • jquery 插件写法
  • jquery解析json对象
  • PreferenceActivity与PreferenceFragment应用
  • 增值税发票的发票号码和发票代码
  • 支付给境外的特许权使用费
  • 进口肉的税率是多少
  • 新电子税务局使用方法
  • 华为领导班子成员名单
  • 要深化税收制度改革健全
  • 美团上满30减12的券在哪啊
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设