<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#text{

    width:300px;

    height:30px;

    padding:5px;

    border:1px solid #f90;

    font-size:16px;

    }

#ul1{

    width:310px;

    padding:0;

    margin:0;

    border:1px solid #f90;

    display:none;

    }

li a{

    line-height:30px;

    padding:5px;

    text-decoration:none;

    color:black;

    display:block;

    }

li a:hover{

    background:#f90;

    color:white;}

</style>

<script>

function may(data)

{

    var oul1 = document.getElementById('ul1');

    var html = '';

    if(data.s.length)

    {

        oul1.style.display = 'block';

        for(var i = 0; i < data.s.length; i++)

        {

            html += '<li><a target= "_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>'

        }

        oul1.innerHTML = html;

    }

    else

    {

        oul1.style.display = 'none';

    }

}

window.onload = function ()

{

    var otext = document.getElementById('text');

    var oul1 = document.getElementById('ul1');

    otext.onkeyup = function ()

    {

        if(this.value != '')

        {

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

            oscript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=may';

            document.body.appendChild(oscript);

        }

        else

        {

            oul1.style.display = 'none';

        }

    }

}

</script>

</head>

<body>

<input id="text" type="text">

<ul id="ul1">

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

</ul>

</body>

</html>

ajax 模仿百度下拉的更多相关文章

  1. angular的跨域（angular百度下拉提示模拟）和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  2. vue的jsonp百度下拉菜单

    通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...

  3. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  4. 用Ajax遍历三级下拉框

    用Ajax遍历三级下拉框 //通过一级分类的id查二级分类(记得在前端网页按钮绑定点击事件) function getSecondCategory(oneCategoryId){ alert(&quo ...

  5. 【亲测好用！】shell批量采集百度下拉框关键词

    [亲测好用!]shell批量采集百度下拉框关键词 SEO工具  方法  11个月前 (11-18)  2153浏览 3条评论 百度已收录 一直想写一篇用shell采集百度下拉框关键词的教程,个人感觉用 ...

  6. 仿百度下拉关键词，和关键词的小demo

    自己做项目时用到的仿百度下拉关键词 代码: $(function(){ var oTxt = document.getElementById('search_text'); oTxt.onkeyup ...

  7. ajax实时获取下拉数据

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ajax ...

  8. vue实现百度下拉框

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

随机推荐

  1. 【转载】Redis多实例及分区

    主要看的这篇文章 http://mt.sohu.com/20160523/n451048025.shtml edis Partitioning即Redis分区,简单的说就是将数据分布到不同的redis ...

  2. 多线程操作（循环往listbox中添加数据）

    一.先造一个窗体,其中就开始按钮,暂停按钮,以及listbox文本框 二.当点击开始的时候,数据会无限的往listbox中加,为了防止卡住和提升效率,便造了一个新的线程来执行开始操作 namespac ...

  3. 使用git submodule管理一个需要多个分立开发或者第三方repo的项目

    在项目开发中,特别是web前端开发中,有非常多的开源第三方library,我们希望引用他们,同时也希望能够方便地保持这些第三方 开源repo的更新.另外一方面如果我们自己在开发一个网站的项目,这个项目 ...

  4. HDU 3496 (二维费用的01背包) Watch The Movie

    多多想看N个动画片,她对这些动画片有不同喜欢程度,而且播放时长也不同 她的舅舅只能给她买其中M个(不多不少恰好M个),问在限定时间内观看动画片,她能得到的最大价值是多少 如果她不能在限定时间内看完买回 ...

  5. WEBUS2.0 In Action - 搜索操作指南 - (4)

    上一篇:WEBUS2.0 In Action - 搜索操作指南(3) 6. 搜索多个索引 为了提升性能, 我们可以从多个索引同时进行搜索, Webus.Search.MultiSearcher提供了相 ...

  6. js作用域的一个小例子

    var foo = function(){ var a =3,b=5; var bar = function(){ var b=7,c=11; alert("111a="+a+&q ...

  7. Linux管道的实现机制

    7.1.1 Linux管道的实现机制 在Linux中,管道是一种使用非常频繁的通信机制.从本质上说,管道也是一种文件,但它又和一般的文件有所不同,管道可以克服使用文件进行通信的两个问题,具体表现为: ...

  8. jq的post传递数组

    a = new Object();            b = new Object();            a['你好[眼见]'] = "y";            a[ ...

  9. 【英语】Bingo口语笔记(57) - 常见的口语弱读

  10. 【自动化测试】Selenium处理富文本框

    http://blog.csdn.net/fudax/article/details/8089404 selenium处理富文本框,日历控件等 调用JS修改value值 document.getEle ...