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. Linux 下 YUM 安装 PHP 5.5 （及5.6）

    原文链接: http://blog.aboutc.net/linux/50/yum-install-php-on-linux 系统环境: CentOS 6.4 x86_64 Fedora 20 x86 ...

  2. Ubuntu16.04怎么安装virtualenv虚拟环境

    最近安装virtualenv的python虚拟环境,在网上找了很多,尝试了很多,都有各种问题,最终搞定后,给大家分享下我的过程,希望大家少走弯路. 本次安装是基于Ubuntu16.04Linux版本安 ...

  3. SSM框架下分页的实现（封装page.java和List<?>）

    之前写过一篇博客  java分页的实现(后台工具类和前台jsp页面),介绍了分页的原理. 今天整合了Spring和SpringMVC和MyBatis,做了增删改查和分页,之前的逻辑都写在了Servle ...

  4. 自学Java测试代码 - 简单地Student类

    2017-08-23  23:45:38 writer:pprp 写这个还蛮开心的 package test; public class Student { //创建成员变量 String name ...

  5. The SO_REUSEPORT socket option

    One of the features merged in the 3.9 development cycle was TCP and UDP support for the SO_REUSEPORT ...

  6. Maven打可执行包的pom.xml配置

    单独打出可执行包,然后将依赖包打入lib文件价中 <build> <plugins> <plugin> <groupId>org.apache.mave ...

  7. 常见ADB命令

    常见ADB命令 比如说知道了push和pull操作,就可以实现一个简单的手机助手. 如果有多台设备,操作的时候要指定设备.  -s加设备名称

  8. VC中release和debug版本的区别

    DEBUG版本 包含调试信息,编译器生成的代码方便调试 RELEASE版本 算是发布版本,RELEASE下不能调试,生成的文件更小,编译器生成的程序速度更快但是Debug下生成的exe文件在单独运行时 ...

  9. C# 终于写完了简单的ORM

    实现单表 增 .删. 改 .查 使用接口定义表实体数据.实体对象动态创建,使用 Email 进行数据读取. 存储过程调用示例

  10. 转 Java对日期Date类进行加减运算一二三

    请移步,https://blog.csdn.net/hacker_lees/article/details/74351838 ,感谢博主分享