Common.js
//封装类名
function byClassName(sClassName){

    if(document.getElementsBYClassName){

        return document.getElementsByClassName(sClassName);

    } else {

        var allTagsName = document.getElementsByTagName('*');

        var result = [];

        for(var i = 0; i<allTagsName.length;i++){

            if(allTagsName[i].className === sClassName){

                result.push(allTagsName[i]);

            }

        }

        return result;

    }

}
 
index.js
var oTxt = byClassName('txt')[0];

var oBtn = byClassName('btn')[0];

var oList = byClassName('list')[0];

oTxt.onpropertychange = oTxt.oninput  = function(){

//    先创建一个script标签,引入接口

    var oScript = document.createElement('script');

    oScript.src = 'https://suggest.taobao.com/sug?code=utf-8&q='+ this.value+'&_ksTS=1519875402602_594&callback=callback';

//    将script标签添加到页面中

    document.body.appendChild(oScript);

//    移除标签

    document.body.removeChild(oScript);

}

//创建回调函数接收数据

function callback(data){

    oList.innerHTML = '';

    data.result.forEach( v => {

        var oLi = document.createElement('li');

        oLi.innerHTML = v;

        oList.appendChild(oLi);

        oLi.onclick = function(){

            oTxt.value = oLi.innerHTML;

            oList.innerHTML = '';

        }

    });

}

　　

HTML（百度）
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>百度搜索</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        form[name=search-form] {

            margin: 40px auto 0;

            width: 640px;

        }

        input[name='search-content'] {

            width: 600px;

            line-height: 30px;

            border:1px solid #ccc;

            vertical-align: bottom;

            outline: none;

        }

        input[name='search-btn'] {

            width: 40px;

            height: 32px;

            border: 1px solid #ccc;

            outline: none;

            cursor: pointer;

        }

        #list {

            list-style: none;

            margin: 0 auto;

            width: 640px;

        }

        #list li {

            padding: 10px 4px;

            border-bottom: 1px dashed #eee;

        }

    </style>

</head>

<body>

    <form action="javascript:;" name="search-form">

        <input type="text" name="search-content"><input type="submit" name="search-btn">

    </form>

    <ul id="list"></ul>

    <script>

        var oForm = document.forms['search-form'];

        var oContent = oForm.elements['search-content'];

        var oList = document.getElementById('list');

        // 定义回调函数

        function callback(data) {

            oList.innerHTML = '';

            data.s.forEach( v => {

                var oLi = document.createElement('li');

                oLi.innerHTML = v;

                oList.appendChild(oLi);

            });

        }

        oContent.onpropertychange = oContent.oninput = function () {

            var oScript =document.createElement('script');

            oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&json=1&p=3&sid=1464_25548_21101_18559_17001_20719&req=2&csor=1&cb=callback';

            document.body.appendChild(oScript);

            document.body.removeChild(oScript);

        };

    </script>

</body>

</html>

　　

HTML（淘宝）
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>跨域请求数据</title>

<style>

    *{

        margin: 0;

        padding: 0;

    }

    ul li{

        list-style: none;

    }

    form{

        width: 640px;

        margin: 30px auto 0;

        position: relative;

    }

    input{

        box-sizing: border-box;

        outline: none;

    }

    .txt{

        width: 600px;

        line-height: 30px;

        vertical-align: bottom;

        border: 1px solid #ccc;

    }

    .btn{

        width: 40px;

        height: 32px;

        border: 1px solid #ccc;

        cursor: pointer;

    }

    .list{

        position: absolute;

    }

    .list li{

        width: 592px;

        padding: 10px 4px;

        cursor: pointer;

    }

    .list li:hover{

        background: #eee;

    }

</style>

</head>

<body>

    <form action="javascript:;">

        <input class="txt" type="text" /><input class="btn" type="submit" />

    <ul class="list"></ul>

    </form>

    <script src="js/common.js"></script>

    <script src="js/index.js"></script>

</body>

</html>
 
两者实现思路都是一样的，进入其对应的官方网站，在输入内容看，打开控制面板查看其请求的api接口，然后将api接口复制过来，通过创建回调接受，然后根据输入的文本框的内容进行动态li的创建，删除即可实现。

js实现百度，淘宝搜索功能的更多相关文章

  1. JS实现选择菜单栏（配合慕课网淘宝搜索框的课程）

    以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head> <!--在IE ...

  2. vue实现淘宝购物车功能

    淘宝购物车功能,效果如下图 非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class=" ...

  3. selenium+PhantomJS 抓取淘宝搜索商品

    最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...

  4. solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能

    首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...

  5. js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...

  6. 百度搜索词&淘宝搜索词 接口实现

    百度和淘宝并没有正式的提供一个公开API给我们用,但是经过分析他们的源代码,还是找到了解决方法. 1 2 3 4 5 6 7 8 9 /*baidu&taobao callback*/ fun ...

  7. 百度-淘宝-360搜索引擎搜索API

    百度(baidu) Api地址:http://suggestion.baidu.com/su?wd=设计&p=3&cb=window.bdsug.sug window.bdsug.su ...

  8. 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面

    由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试pytho ...

  9. Android 淘宝搜索记录分析及千牛数据库名称关联

    一 taobao搜索关键字分析1.导出淘宝数据文件夹.2.搜索search 找到search文件夹.查看里面可疑文件如history_8d4255cc9c9199c6ec3be940936986b9. ...

随机推荐

  1. angularjs 整合bootstrap 时间控件

    一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...

  2. webservice的cxf和spring整合客户端开发

    1.新建一个java项目 2.导入cxf相关的jar包,并部署到项目中 3.用命令生成客户端使用说明文档 wsdl2java -p com.xiaostudy -d . http://127.0.0. ...

  3. 每天一点存储知识：集群Nas

    什么是集群Nas 集群是由多个节点构成的一种松散耦合的计算节点集合,协同起来对外提供服务.集群主要分为高性能集群HPC,高可用集群HAC和负载均衡集群LBC.集群Nas是指协同多个节点(通常称为Nas ...

  4. python的变量，对象的内存地址以及参数传递过程

    作为一个由c/c++转过来的菜鸟,刚接触Python的变量的时候很不适应,应为他的行为很像指针,void* ,不知道大家有没有这样的感觉.其实Python是以数据为本,变量可以理解为标签.作为c/c+ ...

  5. 在 Spark 中使用 IPython Notebook

    本文是从 IPython Notebook 转化而来,效果没有本来那么好. 主要为体验 IPython Notebook.至于题目,改成<在 IPython Notebook 中使用 Spark ...

  6. [转载]查看JDK及Java框架的源代码

    1.点 "window"-> "Preferences" -> "Java" -> "Installed JRE ...

  7. flutter自定义View(CustomPainter) 之 canvas的方法总结

    画布canvas 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像的方法,结合这些方法我们可以绘制出千变万化的画面. 虽 ...

  8. SqlLocalDB命令

    SqlLocalDB info    (查询所有LocalDB实例) SqlLocalDB start 实例名称    (查看某个LocalDB实例状态信息) SqlLocalDB create 实例 ...

  9. idea 2018注册码

    原文:https://blog.csdn.net/zhw0596/article/details/81394870 (最新的看后面!!!    转载的请附上原文链接   搜索不易!)百度的,上一个没用 ...

  10. PHP XML Parser 函数

    PHP XML Parser 简介 XML 函数允许您解析 XML 文档,但无法对其进行验证. XML 是一种用于标准结构化文档交换的数据格式.您可以在我们的 XML 教程 中找到更多有关 XML 的 ...