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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
jquery随机展示头像代码
Dec 21 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
从零搭一个自用的前端脚手架的方法步骤
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结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
深入理解NumPy简明教程---数组2
2016/12/17 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python实现宿舍管理系统
2019/11/22 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
表决心的诗句大全
2014/03/11 职场文书
保证书格式范文
2014/04/28 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
导游词之贵州织金洞
2019/10/12 职场文书