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 Object的extend是一个常用的功能
Dec 02 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
TS 类型兼容教程示例详解
Sep 23 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
操作Oracle的php类
2006/10/09 PHP
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
python中requests小技巧
2017/05/10 Python
浅谈django的render函数的参数问题
2018/10/16 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
在python里从协程返回一个值的示例
2019/02/19 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python操作文件的参数整理
2019/06/11 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
python 装饰器重要在哪
2021/02/14 Python
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
大学生村官典型材料
2014/01/12 职场文书
村道德模范事迹材料
2014/08/28 职场文书
党小组意见范文
2015/06/08 职场文书
初中政治教师教学反思
2016/02/23 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android
详解Vue的列表渲染
2021/11/20 Vue.js