<!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. JS获取系统的指定定年月日

    /** * 获取系统当前时间 */ function getNowYearMouth(){ var date=new Date; var nowYearMouth=date.getMonth()+1; ...

  2. Codeforces Round #206 div1 C

    CF的专业题解 : The problem was to find greatest d, such that ai ≥ d,  ai mod d ≤ k holds for each i. Let ...

  3. 【Todo】InnoDB、MyISAM、数据库引擎

    关于InnoDB和MyISAM引擎的对比,下面这篇讲的挺好 http://www.cnblogs.com/vicenteforever/articles/1613119.html 这一篇关于InnoD ...

  4. C#配置系统未能初始化

    如果配置文件中包含 configSections 元素,则 configSections 元素必须是 configuration 元素的第一个子元素.",将appSettings放到conf ...

  5. 《自己动手写操作系统》pmtest2笔记

    ;DispReturn模拟一个回车的显示,(让下一个要显示的字符在下一行的开头处显示),其中edi始终指向要显示的下一个字符的位置.;   ------------------------------ ...

  6. hdu4604 deque

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4604 思路:就是模拟一下,求每一个开始的非上升和非下降序列.然后求重复的数,由于求出来可能不会是我们想 ...

  7. 在 VC6 中使用 GdiPlus-使用

    下面用 VC6 来写一个 GdiPlus 的 Demo 工程 Step1:新建一个名为 Demo_GdiPlus 的 MFC AppWizard(exe) 工程 操作步骤:(1)主菜单File-> ...

  8. hdu 1429 胜利大逃亡(续) (bfs+状态压缩)

    又开始刷题了 题意:略过. 分析:主要是确定状态量,除了坐标(x,y)之外,还有一个key状态,就好比手上拿着一串钥匙.状态可以用位运算来表示:key&(x,y)表示判断有没有这扇门的钥匙,k ...

  9. python练习程序（c100经典例14）

    题目: 将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. def foo(n): while 1: for i in range(2,n+1): if n%i==0: print ...

  10. 【英语】Bingo口语笔记(27) - 如何培养口语语感