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 Demo模态窗口
Dec 06 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
Paypal支付不完全指北
Jun 04 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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 Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python爬取三国演义的实现方法
2016/09/12 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
网络安全方面的面试题
2015/11/04 面试题
小学门卫岗位职责
2013/12/17 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
行政撤诉申请书
2015/05/18 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
催款函范本大全
2015/06/24 职场文书
关于感恩的作文
2019/08/26 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python