<!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. Android模拟器分辨率介绍

    转自: http://www.cnblogs.com/xrtd/p/3746935.html 本人喜欢用  HVGA(320x480) Skins:HVGA.HVGA-L.HVGA-P.QVGA-L. ...

  2. from 表单提交

    html端代码 <body> <div id="dlg" class="easyui-panel" buttons="#dlg-bu ...

  3. objective-c 与 js之间传递中文乱码

    最近在做关于js改写oc framework的小project,遇到了不少问题 其中刚遇到的是关于如何在两者之间传递中文字符,带特殊字符的URL字符串 不会很详细的介绍太多,以后会回头做个总结 oc传 ...

  4. UC编程之线程

    线程--隶属于进程,是进程中的程序流.操作系统支持多进程,每个进程内部支持多线程.多线程并行(同时执行)代码. 进程--重量级的,每个进程都需要独立的内存空间. 线程--轻量级的,线程不拥有独立的内存 ...

  5. laravel重要概念和知识点

    Service Provider: 一个laravel service provider就是一个注册IoC container binding的类.实际上,laravel本身就自包含了一堆管理核心框架 ...

  6. bzoj1564: [NOI2009]二叉查找树

    dp. 首先这棵树是一个treap. 权值我们可以改成任意实数,所以权值只表示相互之间的大小关系,可以离散化. 树的中序遍历是肯定确定的. 用f[l][r][w]表示中序遍历为l到r,根的权值必须大于 ...

  7. python练习程序（c100经典例20）

    题目: 一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? def foo(height,num): sum=height; pr ...

  8. GLSL学习_高斯滤波

    使用RenderMonkey: 从自带的sobel修改的. vertex: uniform float height; varying vec4 vTexCoords00; varying vec4 ...

  9. 【原创】搭建Nginx（负载均衡）+Redis（Session共享）+Tomcat集群

    为什么移除首页?哪里不符合要求?倒是回我邮件啊! 一.环境搭建 Linux下Vagrant搭建Tomcat7.Java7 二.Nginx的安装配置与测试 *虚拟机下转至root sudo -i 1)下 ...

  10. delete archivelog all 无法彻底删除归档日志？

    最近在因归档日志暴增,使用delete archivelog all貌似无法清除所有的归档日志,到底是什么原因呢? 1.演示环境 SQL> select * from v$version whe ...