自动完成的搜索框javascript实现


Posted in Javascript onFebruary 26, 2016

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

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

界面的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代码之前, 将默认的一些浏览器样式清除.最后效果如下.

自动完成的搜索框javascript实现

好了.下面我们完成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);
  }

 }

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

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

自动完成的搜索框javascript实现

这里可能是录制软件问题, 边框与它录制的背景颜色应该一样了. 边框不见了(⊙?⊙)b
以上就是JAVASCRIPT实现搜索框的自动完成效果,大家可以自己测试玩玩!

Javascript 相关文章推荐
javascript小数精度丢失的完美解决方法
May 31 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
jquery实现提示语淡入效果
May 05 jQuery
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 #Javascript
js去字符串前后空格的实现方法
Feb 26 #Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 #Javascript
超实用的JavaScript表单代码段
Feb 26 #Javascript
理解javascript中Map代替循环
Feb 26 #Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 #Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 #Javascript
You might like
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
php导出CSV抽象类实例
2014/09/24 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
Python获取当前时间的方法
2014/01/14 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python实现取余操作的简单实例
2020/08/16 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
运动会方阵解说词
2014/02/12 职场文书
人事专员工作职责
2014/02/22 职场文书
小学生倡议书范文
2014/05/13 职场文书
爱与责任演讲稿
2014/05/20 职场文书
优秀班组长事迹
2014/05/31 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
创业计划书之水果店
2019/07/18 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js