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监听浏览器的问题
Jun 23 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
编程语言JavaScript简介
Oct 16 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
javascript 写类方式之八
2009/07/05 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
js实现模糊匹配功能
2017/02/15 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python 读入多行数据的实例
2018/04/19 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
通用C#笔试题附答案
2016/11/26 面试题
前台领班岗位职责
2013/12/04 职场文书
元旦促销方案
2014/03/15 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
承诺书格式
2014/06/03 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
化工厂员工工作总结
2015/10/15 职场文书
创业计划书之农家乐
2019/10/09 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
Python实现聚类K-means算法详解
2022/07/15 Python