这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了自动完成的搜索框 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 的代码控制. 我们来分析下, 其中的事件. 用户在输入框输入文字后, 将输入的文字与后台数据做查询, 查询到后返回给客户端, 然后将返回的数据显示在数据列表下.
根据这个步骤, 我们首先是获取输入框标签, 给这个标签添加 onkeyup 事件
- var ele_key = document.getElementById("key");
- ele_key.onkeyup = function (e) {
- //处理事件
- }
这里我们模拟一个后台数据, 这里用数据来表示, 然后加入一些数据
- var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
后台数据有了, 事件也添加了. 这时候我们对数据进行处理了. 首先是获取用输入的数据, 来然后与后台数据进行比较. 然后将比较后的数据保存在一个数据里面.
- //定义一些数据
- var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
- var ele_key = document.getElementById("key");
- ele_key.onkeyup = function (e) {
- var val = this.value;
- //获取输入框里匹配的数据
- var srdata = [];
- for (var i = 0; i < data.length; i++) {
- console.log(data[i].indexOf(val))
- if (val.trim().length > 0 && data[i].indexOf(val) > -1) {
- srdata.push(data[i]);
- }
- }
- }
继续往下分析, 目前我们获取到后台查询到的数据后, 那就得将这个数据显示给用户查看, 这里我们显示在数据列表中.
- //定义一些数据
- var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
- var ele_key = document.getElementById("key");
- ele_key.onkeyup = function (e) {
- var val = this.value;
- //获取输入框里匹配的数据
- var srdata = [];
- for (var i = 0; i < data.length; i++) {
- console.log(data[i].indexOf(val))
- if (val.trim().length > 0 && data[i].indexOf(val) > -1) {
- srdata.push(data[i]);
- }
- }
- //获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示
- var ele_datalist = document.getElementById("datalist");
- ele_datalist.style.visibility = "visible";
- ele_datalist.innerHTML = "";
- if (srdata.length == 0) {
- ele_datalist.style.visibility = "hidden";
- }
- //将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏
- var self = this;
- for (var i = 0; i < srdata.length; i++) {
- var ele_li = document.createElement("li");
- var ele_a = document.createElement("a");
- ele_a.setAttribute("href", "javascript:;");
- ele_a.textContent = srdata[i];
- ele_a.onclick = function () {
- self.value = this.textContent;
- ele_datalist.style.visibility = "hidden";
- }
- ele_li.appendChild(ele_a);
- ele_datalist.appendChild(ele_li);
- }
- }
在添加数据到列表中时, 我们首先对数据列表做初始化处理, 避免重复数据的添加. 其次就是我们给数据列表的每一行添加了一个点击事件, 点击后将数据放入搜索框内, 数据列表隐藏.
在这里整个自动完成的搜索框就完成了. 我们来测试下效果.
这里可能是录制软件问题, 边框与它录制的背景颜色应该一样了. 边框不见了 (⊙﹏⊙)b 以上就是 JAVASCRIPT 实现搜索框的自动完成效果,大家可以自己测试玩玩!
来源: http://www.phperz.com/article/17/0408/266939.html