ajax 模仿百度下拉

<!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>
时间: 2024-07-28 23:56:02

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

angular的跨域(angular百度下拉提示模拟)和angular选项卡

1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).success().error(); $http.jsonp(url,{params:{wd:'',cb:'JSON_CALLBACK'}}).success().error(); 注意jsonp中cb在angular中规定只能使用JSON_CALLBAC $watch(谁,做什么,false): 谁指

vue的jsonp百度下拉菜单

通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.min.js"></script> 7 <scri

百度下拉智能搜索提示

此案例使用的时ajax技术实现百度下拉,其中有利用jsonp解决跨域的问题,目前刚接触到ajax技术,在这里分享记录一下学习的痕迹!<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>EMS-jquery查询</title> <style type="text/css"> #sug

ajax实现级联下拉菜单

ajax实现级联下拉菜单非常简单,下面是一个用ajax实现的省市级联的下拉菜单: jsp中在<select>中添加onchange事件,触发该事件调用实现ajax的js: <div> <form action="Pcs" method="post"> 所在省:<select name="pro" id="pro" onchange="chCity();"> &

ajax实时获取下拉数据

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ajax实时获取下拉数据</pre> <style><!-- .input_s{ position:relative} .input_s ul{ list-style:none; margin:0; padding:0; width:200px; border:1px solid #cc

使用ajax实现城市下拉框

在博客园学习了很多实用的东西,现在该慢慢开始自己写写博客文章, 由于本人水平有限,刚走出校园的小菜鸟,另外,文章在表述和代码方面如有不妥之处,欢迎批评指正.留下你 的脚印,欢迎评论! 有什么问题,可以互相探讨,希望对各位有所帮助.开始讲东西吧 一个现实城市下拉框的界面 html代码: <table> <tr> <td><h5>城市下拉框</h5></td> <td> <select id="selNatio

ajax三级联动下拉菜单

ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国地域: 北京的代号为11,那么子代号为11的便是北京时的市区, 也就是说根据主代号查询子代号: (3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端 显示页面非常简单,只需要一

Ajax来实现下拉框省市区三级联动效果(服务端基于express)

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

ajax 遍历select 下拉框

html :<select id="type"   > </select> js代码: <script type="text/javascript">  //动态绑定下拉框项          function addnotice() {              $.ajax({                  url: "${pageContext.request.contextPath}/dictionary/j