JAVASCRIPT实现搜索框的自动完成效果(一)_html/css_WEB-ITnose

Javascript实现搜索框的自动完成效果(一)

作者 :towaywu

2016-02-25 11:04:23.0

33 浏览

类别 :编程语言 前端编程 HTML/CSS/JAVASCRIPT

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

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

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

 <div class="search">         <input type="text" value="">         <button>搜索</button>  </div>

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

.search {    display: inline-flex;    height: 35px;    margin: 50px auto;    position: relative;}.search input {    border: #eee 1px solid;    background-color: #fff;    outline: none;    width: 200px;    padding: 0 5px;}.search button {    background-color: #ff3300;    color: #fff;    border: none;    width: 80px;}

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

比如

<ul>    <li><a href="#">武林外传</a> </li>    <li><a href="#">葵花宝典</a> </li>    <li><a href="#">如来佛掌</a> </li>    <li><a href="#">九阴白骨爪</a> </li></ul>

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

.search ul {    position: absolute;    left: 0;    top: 35px;    border: #eee 1px solid;    min-width: calc(100% - 80px);    text-align: left;}.search ul a {    display: block;    padding: 5px;}

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

好了. 下一篇文章我们完成JS的代码控制.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=212 ,欢迎大家传播与分享.

标签 :javascript教程搜索框

android项目没有android.jar这个依赖包的解决办法

已经没有数据

towaywu

一个喜欢技术,走在创业路上的屌丝!欢迎一起交流

编程的人微信公众号: bianchengderen

交流QQ群: 186659233