<!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. 连接Access数据库查询语句

    --在使用之前注意将“生成”里的“配置管理器”的“配置平台”改成X86 private void button1_Click(object sender, EventArgs e)//查询 { Ole ...

  2. UVa (一道比较复杂的广搜) 816 Abbott’s Revenge

    题意: 给出一个迷宫,在迷宫的节点处,面向某个方向只能向给定的方向转弯.给出起点和终点输出迷宫的最短路径,这里指的是刚刚离开起点的时刻,所以即使起点和终点重合路径也非空. 分析: 用三个变量来表示状态 ...

  3. HDU 1317 XYZZY【Bellman_Ford判断正环】

    题意:给出n个房间,初始在房间1有100的能量值,每次进入一个房间,能量值可能增加也可能减小,(是点权,不是边权),问能否到达终点的时候能量值还为正 这题自己写的时候wa--wa-- 后来看了题解,还 ...

  4. volley(3) 参数{or_barcode:or_barcode,or_remai:or_remain, bar_remain:bar_remain} method:POST

    1. 来自于WHCombineBatchFragment.java/** * 分拆按钮点击事件,获取数据,同时获取popupWindow的数据 */private void breakingBtnCl ...

  5. BZOJ 3624 免费道路

    第一反应:这不先0后1做并查集就行了吗? 然后WA了... 哦....啊?哦...233 如果按顺序做并查集,有些0的边可能很重要(只能由它作为0连起两个联通块),但并没有被选. 于是先按1做并查集, ...

  6. web服务器的相关资料 ngix

    OpenResty:官方网站  http://openresty.org/cn/index.html 利用nginx+lua+memcache实现灰度发布 http://www.cnblogs.com ...

  7. HDU 4608 I-number 2013 Multi-University Training Contest 1

    定义一个数 y 为 x 的 I-number.对于 y 有如下要求: 1.y > x; 2.y 的每一位之和要为10的倍数(例如 28 每一位之和为 10 ,为 10 的 1 倍); 3.这样的 ...

  8. Hadoop Hive基础sql语法

     目录 Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件映射为一张数据库表,并提供完整的 ...

  9. RequireJS进阶（二） 转

    这一篇来认识下打包工具的paths参数,在入门一中就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”,但文件 ...

  10. bootstrap-datetimepicker在经过GC(Google Closure Compiler)压缩后无法使用的解决方案

    将压缩级别由simple改成whitespace 问题就是这样之后压缩后的文件大了很多 <?xml version="1.0"?> <project name=& ...