js实现百度淘宝搜索功能


Posted in Javascript onFebruary 17, 2020

本文实例为大家分享了js实现百度淘宝搜索功能的具体代码,供大家参考,具体内容如下

由于没有后台数据,用数组模拟一下后台返回的数据

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  .box{
    width:214px;
    /*height: 400px;*/
    margin: 100px auto;
    position: relative;
   }
  </style>
</head>
<body>
 <div class="box">
  <input type="text" id="txt">
  <input type="button" id="btn" value="搜索">
 </div>
 <script src="common.js"></script>
 <script>
  //模拟后台的数据
  var keyWords = [
   "一马当先",
   "一箭双雕",
   "一丝不苟",
   "一心二用",
   "吃火锅",
   "吃鸡肉",
   "吃鸡腿",
   "吃鸡蛋",
   "哈1哈",
   "嘻1嘻",
   "呜1呜",
  ];
  //给文本框注册键盘松开事件
  $query("#txt").onkeyup = function () {
   var txt = $query("#txt").value;
   if ($query(".box div")) {
    $query(".box").removeChild($query(".box div"));
   }
   if (txt.length == 0) {
    if ($query(".box div")) {
     $query(".box").removeChild($query(".box div"));
    }
    return;
   }
   var newArr = [];
   for (var i = 0; i < keyWords.length; i++) {
    if (keyWords[i].indexOf(txt) !=-1) {
     newArr.push(keyWords[i]);
    }
   }
   if (newArr.length > 0) {
    var newBox = document.createElement("div");
    newBox.style.border = "1px solid red";
    newBox.style.width = "100%";
    $query(".box").appendChild(newBox);
    for (var j = 0; j < newArr.length; j++) {
     var newP = document.createElement("p");
     newP.style.width = "100%";
     newP.innerText = newArr[j];
     newP.onmouseover = function () {
      this.style.backgroundColor = "yellow";
     }
     newP.onmouseout = function () {
      this.style.backgroundColor = "";
     }
     newBox.appendChild(newP);
    }
   }
   console.log(newArr);//打印匹配的数据
  }
 </script>
</body>
</html>

最后,附上效果图,确实丑了点?

js实现百度淘宝搜索功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
JavaScript中的 new 命令
May 22 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 #Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 #Javascript
Vue 中使用 typescript的方法详解
Feb 17 #Javascript
vue框架中props的typescript用法详解
Feb 17 #Javascript
JS通用方法触发点击事件代码实例
Feb 17 #Javascript
JS前端广告拦截实现原理解析
Feb 17 #Javascript
JavaScript代码异常监控实现过程详解
Feb 17 #Javascript
You might like
PHP中的日期及时间
2006/11/23 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
python简单实现计算过期时间的方法
2015/06/09 Python
基于Python实现文件大小输出
2016/01/11 Python
python保存数据到本地文件的方法
2018/06/23 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
Python与C/C++的相互调用案例
2021/03/04 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
竟聘演讲稿范文
2013/12/31 职场文书
王老吉广告词
2014/03/20 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
青岛导游词
2015/02/12 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
详解Redis基本命令与使用场景
2021/06/01 Redis
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫