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. PAT L3-012 水果忍者

    占个坑,等自己数学好一点以后再来重新把这个题写一遍 附上链接 附上大牛代码: #include <stdio.h> #include <algorithm> #define I ...

  2. Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）

    需求类似这样  ↓ ↓ ↓   -->    菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: <script type="text/javascript"& ...

  3. Java程序员怎么迈向架构师

    怎样学习才能从一名Java初级程序员成长为一名合格的架构师,或者说一名合格的架构师应该有怎样的技术知识体系,这是不仅一个刚刚踏入职场的初级程序员也是工作三五年之后开始迷茫的老程序员经常会问到的问题. ...

  4. SQL Server配置管理器”远程过程调用失败“

    在设置服务器远程连接的时候,打开SQL server配置管理器时,SQL server服务右侧显示“远程调用失败”. 解决方法: 在控制面板中找到  Microsoft SQL Server 2016 ...

  5. 分布式缓存集群方案特性使用场景（Memcache/Redis(Twemproxy/Codis/Redis-cluster)）优缺点对比及选型

    分布式缓存集群方案特性使用场景(Memcache/Redis(Twemproxy/Codis/Redis-cluster))优缺点对比及选型   分布式缓存特性: 1) 高性能:当传统数据库面临大规模 ...

  6. linux共享上网设置

    1.打开内核ip转发 vi /etc/sysctl.conf  net.ipv4.ip_forward = 1 执行sysctrl -p生效 2.如果主机未启用防火墙,那么如下设置iptables [ ...

  7. Angular中form表单中input自动响应回车事件无效

    环境:angular.js 问题:当你在input框中输入搜索信息,然后回车键,信息消失而且也没有执行查询??? 原因:组合查询的代码不是<button ng-click="ch()& ...

  8. vue-awesome-swiper 第一张自动跳过

    昨天在上班中要做一个商品页面,需求是从后台接口获得轮播图的路径,然后传到封装好的组件中,本来以为很简单啊,没什么毛病,开始动手~ 东西很简单,新建一个banner组件 如下: <template ...

  9. 从工程角度看C++观察者模式中的接口是否需要提供默认的实现

    在C++中,我们会经常用到观察者模式(回调模式,Delegate模式等,意思都一样),比如当Source中的某个参数发生了变化时,我们通过观察者模式进行回调通知,下面是一个例子: class Sour ...

  10. MySQl的group by 与排序

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtoAAAFLCAIAAABnXrwfAAAgAElEQVR4nO2dT29jvZHu+WHnW8xqdl ...