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. composer安装教程 windows系统 | Linux系统 | mac系统

    如何安装 Composer 下载 Composer 安装前请务必确保已经正确安装了 PHP.打开命令行窗口并执行 php -v 查看是否正确输出版本号. 打开命令行并依次执行下列命令安装最新版本的 C ...

  2. unix_timestamp() 和 from_unixtime()

    unix_timestamp() 将时间转换为时间戳.(date 类型数据转换成 timestamp 形式整数) select unix_timestamp('2016-03-23 11:10:10' ...

  3. 秒懂算法2——选择排序（C#实现）

    算法思路: 每趟走访元素揪出一个最小(或最大)的元素,和相应位置的元素交换.(用数组{6,9,13,2,4,64} 举例) {},{6 9 13 [2] 4 64}     //第一趟,揪出2 {2} ...

  4. CDN专业一站式解决方案

    调度,弱网加速,动态防御,无限节点(重)新技术

  5. SSM整合报错org.springframework.beans.factory.UnsatisfiedDependencyException

    我解决的办法是把.m2仓库所有文件删除,重新maven project就可以了. 但是在做这一步之前,报错如下: ①org.springframework.beans.factory.Unsatisf ...

  6. ubuntu14.04安装hadoop2.6.0（伪分布模式）

    版本:虚拟机下安装的ubuntu14.04(64位),hadoop-2.6.0 下面是hadoop2.6.0的官方英文教程: http://hadoop.apache.org/docs/r2.6.0/ ...

  7. PHP 7.3.0.beta3 发布，下个版本将进入 RC 阶段

    PHP 7.3.0 第三个测试版 beta3 已发布,源码下载地址 >>> https://downloads.php.net/~cmb/ 更新内容如下: - Core: . Fix ...

  8. Eclipse创建Maven聚合项目

    整体架构图 1.新建父工程 新建maven父项目(用来管理jar包版本),使子系统使用同一个版本的jar包. File->New->Other->Maven Project,打包方式 ...

  9. 设计模式--单例模式C++实现

    单例模式C++实现 1描述: 单例模式,又称单件模式. 定义:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 2具体类图描述: 2.1 StartUML内部生成模式类图 该类图由S ...

  10. 11.深入理解读写锁ReentrantReadWriteLock

    protected final int tryAcquireShared(int unused) { /* * Walkthrough: * 1. If write lock held by anot ...