位置: 编程技术 - 正文

自动完成的搜索框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的定时器函数)

  • 怎么计算土地增值税的相关税金
  • 小规模要交增值税怎么计提
  • 增值税以物易物税收政策
  • 合同取得成本属于
  • 酒店物业费收取标准2019
  • 个人所得税修改赡养信息
  • 报税中反写是什么意思
  • 增票普票税额是否可以抵扣吗
  • 超过认证期限的发票未抵扣能红冲吗
  • 企业进行业务预算的编制技巧
  • 外币借款业务的会计分录还款时利息
  • 会计学中营业利润的计算
  • 一般纳税人税种认定有几个增值税要怎么申报呀
  • 会计凭证的填制与审核过程
  • 私募基金款打到什么账户
  • 债务豁免的会计分录
  • 小规模纳税人纳税申报流程
  • 销项负数发票怎么填报增值税报表
  • 增值税税控盘抵减
  • 附加税减半征收政策是哪个文件
  • 购进农产品怎么做账
  • 制造成本包括哪几项
  • 收到质量赔偿款从总账做账可以
  • "专项储备"在合并报表层面如何处理?
  • 出口退税计算方法是免退税吗
  • 支付商业保险费属于什么现金流量项目
  • 外购固定资产对账怎么算
  • 小规模纳税人如何缴纳企业所得税
  • php如何实现多进程
  • 建筑业预缴企业所得税税率是多少
  • php面向对象详解
  • 处理车辆违章送哪个部门
  • 辅导期纳税人增值税专用发票数量不得超过
  • 入固定资产含税吗
  • 计提下月工资怎么算
  • 命令执行语句
  • 删除组合命令
  • 提取现金准备发放工资
  • 无偿划转法律意见
  • 免征增值税的规定
  • 税管员管多少企业
  • 多缴所得税怎么算
  • 企业发生的汇兑差额
  • 可以采用
  • 水电费进项税额转出情形
  • mysql批量新增字段
  • 企业与债权人进行债务重组
  • 主办会计的工作内容和职责
  • 汽车销售和租赁业务描述
  • 在建工程待摊支出结转
  • 增值税劳务费税率是多少
  • 固定资产对外投资通过固定资产清理吗
  • 销售折扣怎么制定
  • 结转费用时财务费用为负
  • sqlserver数据库测试工具
  • sql server 1222解决
  • 用Win7系统的Syskey命令来设置系统的启动密码
  • 用diskgenius硬盘格式转换怎么使用
  • w10点击没反应
  • win8如何切换用户登录
  • win7安全模式
  • bootstrap框架怎么用
  • dos批处理高级教程合编.pdf
  • 批处理查询文件是否存在
  • 批处理 修改文件名
  • shell怎么创建用户
  • python3.5 + PyQt5 +Eric6 实现的一个计算器代码
  • unity如何动态刷新滚动列表
  • 利用的英文
  • Unity-DF 2048界面
  • android editText inputType 各个字段的含义
  • flask框架下使用scrapy框架
  • 运满满订单取消技术服务费退还吗
  • 贵州省地方税务局房地产税收征收管理办法
  • 香港居民个人转让境内股权所得个人所得税税率
  • 厦门市地方税务局市稽查局关于规范稽查有关规定
  • 全国砂石供应紧缺
  • 满五唯一是指省内还是本市
  • 买新房子需要交契税吗
  • 申报农业项目的程序是什么?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设