自动完成的搜索框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高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
详解React-Todos入门例子
Nov 08 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
Vue的过滤器你真了解吗
Feb 24 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
main.php
2006/12/09 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
$()JS小技巧
2007/07/21 Javascript
js身份证验证超强脚本
2008/10/26 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jquery中动态效果小结
2010/12/16 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Python编程中的异常处理教程
2015/08/21 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
python定义类self用法实例解析
2020/01/22 Python
python Cartopy的基础使用详解
2020/11/01 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
个人收入证明范本
2014/09/18 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
python如何进行基准测试
2021/04/26 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技