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 06 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
node中的cookie的具体使用
Sep 13 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
如何利用js在两个html窗口间通信
Apr 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实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
一个javascript参数的小问题
2008/03/02 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python ZipFile模块详解
2013/11/01 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python快速排序算法实例分析
2017/11/29 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
化验室技术员岗位职责
2013/12/24 职场文书
文艺晚会主持词
2014/03/24 职场文书
开服装店计划书
2014/08/15 职场文书
委托公证书样本
2015/01/23 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
索尼ICF-5900W收音机测评
2022/04/24 无线电