JavaScript实现搜索的数据显示
本文实例为大家分享了JavaScript实现搜索的数据显示代码，供大家参考，具体内容如下
今天的效果如下：
这个案例的要点有两个：
一是使用CSS显示样式
二是使用js比较输入的内容和数组中的内容使得包含输入内容的数据显示出来
首先来看CSS显示样式的难点：
两个div的接触部分，要想让它们无缝隙接触，就需要设置float：left；
两个div盒子左右两侧的圆角边框，我们需要分别为border-top-left-radius等设置值，这样就大致得到了搜索框的样式，剩下的细节可以去代码中查看~
接着来看JS进行比较的部分：
总的思想呢，就是当输入内容时使下方显示搜索框，显示匹配的数据；不输入或输入数据不匹配时，不显示数据或显示暂无数据；搜索框失去焦点时使下方的搜索框消失
1、当我们在搜索框中输入内容时，我们可以调用onkeyup函数，先使下方的搜索框display属性值为block；
然后在其中调用forEach遍历数组中的所有数据，通过value获得输入的内容，调用indexOf将该内容与数组中的数据进行比较，若有匹配项的话，其返回值是数组中数据的下标，否则为-1；
若有匹配项的话，我们可以利用innerHTML，在下面的显示框中添加p标签，p中的内容是匹配的数据；如果没有就返回内容是‘暂无数据'的p标签
2、当该搜索框失去焦点时，我们令下方搜索框的display属性值为none就可以了
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
height: 160px;
padding: 40px;
margin: 100px auto
}
#one {
width: 268px;
height: 33px;
float: left;
border: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(245, 246, 247);
outline: none;
}
#search {
background-color: rgb(252, 85, 49);
color: white;
width: 70px;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 13px;
border-radius: 20px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
float: left;
}
#show {
width: 270px;
height: 170px;
border: 1px solid rgba(77, 76, 76, 0.459);
display: none;
margin-top: 40px;
overflow: hidden;
}
#show div{
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 1em;
display: block;
}
#show div:hover{
background-color: rgb(240, 240, 245);
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
<div id="nav">
<input type="text" id="one" placeholder="请输入课程" autocomplete="on">
<div id="search">搜索</div>
</div>
<div id="show">
<div></div>
</div>
</div>
<script>
let arr = ['蛋糕便宜卖', '想吃水果', '2333', 'css精品课程','2个小朋友','这儿有2个面包','我们一起','乐队的夏天','天气真好'];
let one = document.getElementById("one");
let show = document.getElementById("show")
one.onfocus = function () {
show.style.display = "block";
one.style.border = "1px coral solid"
one.onkeyup = function () {
let str = '';
let tem=false;
arr.forEach((item) => {
let index = item.indexOf(one.value);
if (~index) {
tem=true;
str+='<div>'+item+'</div>';//每次都更新str的值，所以不用担心重复
}
})
//很重要
if(one.value=='' || !tem){
show.innerHTML='<div>'+'暂无结果'+'</div>';
}
else{
show.innerHTML=str;
}
}
}
//onblur 的事件会在对象失去焦点时发生
one.onblur = function () {
show.style.display = "none"
one.style.border = "1px transparent solid"
show.innerHTML='';
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript对JSON数据进行排序和搜索
在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排序.搜索等,而不是通过AJAX请求由数据库进行这些操作. 今天我就教给大家如何使用数组的方法来实现这些操作: /*假设json就是后台传过来的json数据*/ var test=[ { price:15, id:1, description:'这是第一个数据' },{ price:30, id:3, description:'这是第二个数据' },{ pri
-
JS实现表格数据各种搜索功能的方法
本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onl
-
js实现表格数据搜索
本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格数据搜索</title> <link href="../css/表格数据搜索.css" rel="external nofollow&quo
-
JavaScript实现搜索的数据显示
本文实例为大家分享了JavaScript实现搜索的数据显示代码,供大家参考,具体内容如下 今天的效果如下: 这个案例的要点有两个: 一是使用CSS显示样式 二是使用js比较输入的内容和数组中的内容使得包含输入内容的数据显示出来 首先来看CSS显示样式的难点: 两个div的接触部分,要想让它们无缝隙接触,就需要设置float:left: 两个div盒子左右两侧的圆角边框,我们需要分别为border-top-left-radius等设置值,这样就大致得到了搜索框的样式,剩下的细节可以去代码中查看~
-
JavaScript实现搜索框的自动完成功能(一)
在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT
-
javascript实现搜索筛选功能实例代码
案例样式即功能 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet"
-
用javascript打造搜索工具栏
一:最终效果 二:原理 如果你在Yahoo中搜索"中国",那么在浏览器的地址栏将得到这样一串地址:http://search.cn.yahoo.com/search?ei=gbk&fr=fp-tab-web-ycn&meta=vl%3Dlang_zh-CN%26vl%3Dlang_zh-TW&pid=ysearch&source=ysearch_www_hp_button&p=%D6%D0%B9%FA&Submit=看上去有些乱了,简化一
-
javascript下搜索子字符串的的实现代码(脚本之家修正版)
例如有这么一个字符串<img src='test' alt=123>xtxtxt<img src='test' alt=321>1221<img src='test' alt=yes>,我要从中找出所以alt的值,同时还有非标签中的值,想这个例子中,就是要搜索出123xtxtxt3211221yes这个结果来 ,还有一点就是 原字符串是不确定的,是由用户输入的 test //搜索出所有alt的值和innerHTML的值 var tmp=""; var
-
自动完成的搜索框javascript实现
在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮. <div class="search"> <input type="text" value=""
-
JavaScript实现百度搜索框效果
最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <
-
跟我学习javascript的undefined与null
当讨论JavaScript中的原始数据类型时,大多数人都知道从String.Number到Boolean的基本知识.这些原始类型相当简单,行为符合常识.但是,本文将更多关注独特的原始数据类型Null和Undefined,是什么让它们如此相似,却又似是而非. 一.理解null和undefined 在JavaScript中,null是字面量同时也是语言中的关键字,用来表示无法识别的对象值.换句话说,这用来表示"无值(no value)",但你可以决定什么时候得到期望值. 虽然相似,unde
-
php 搜索框提示(自动完成)实例代码
百度的搜索大家都在用,当用户输入文字时,搜索框下面自动提示相关的信息,加强了用户体验,的确不错,那么这个效果是如何实现的呢 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! 下面先主要讲解原理: 在search.html页面中,用户在搜索框内输入"j"时,使用javascript获取搜索框的文本内容,到数据库中查找相关的内容并返回,再使用javascript将服务器返回的结果显示在搜索框下面的提示框内,供用户参考选择. 具体的实现方法: 首先在页面
-
JavaScript null和undefined区别分析
一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理.于是,细想之后,写下本文,请各位大侠拍砖. 总所周知:null == undefined 但是:null !== undefined 那么这两者到底有啥区别呢? 请听俺娓娓道来... null 这是一个对象,但是为空.因为是对象,所以 typeof null 返回 'object' . null 是 JavaScript 保留关键字. null 参与数值运算时其值会自动转换为 0 ,因此,下列表达式计算后会得到正