当前位置: 澳门新濠3559 > 数据库 > 正文

澳门新濠3559获取百度接口,  实现这个功能需

时间:2019-11-08 05:43来源:数据库
index++; 实现这个功能需要服务端配合。客户端通过脚本来展示从服务端取得的数据。先看客户端的HTML: 复制代码... 复制代码 代码如下:   var  index = -1; //定义input的键盘抬起事件  从

index++;

实现这个功能需要服务端配合。客户端通过脚本来展示从服务端取得的数据。 先看客户端的HTML: 复制代码...

复制代码 代码如下:

  var  index = -1; //定义input的键盘抬起事件  从-1开始

  先看客户端的HTML:

  • 1
                                }
                                autoMail.keyOperate(_index);
                                break;
                            default:
                                if(autoMail.val().indexOf('@') < 0){
                                    _value = autoMail.val();
                                    autoMail.order(_value);     
                                }    
                        }  
                    }
                })
                $(document).click(function(){
                    if($(autoMail.list).length > 0){
                        autoMail.remove();
                        autoMail.blur();
                    }
                })
            }
            //创建列表
            autoMail.create = function(){
                var li = '';
                for(var i = 0; i < autoMail.vars.mailArr.length; i++){
                    li += '<li class="item">'+ '<span class="style">' + '@' + autoMail.vars.mailArr[i] + '</span>'
  • '</li>';
                }
                autoMail.list = $('<div class="'+ autoMail.vars.listCls +'"><ul>'+ li +'</ul></div>');
                autoMail.list.css({
                    'position' : 'absolute',
                    'left'     : _left,
                    'top'      : _top + _height + autoMail.vars.listTop,
                    'min-width': _width
                })
                autoMail.list.appendTo($('body'));
                //邮箱列表绑定事件
                autoMail.list.find('.item').click(function(event){
                    autoMail.getVal($(this));
                    autoMail.remove();
                    event.stopPropagation();
                })
                autoMail.list.find('.item').hover(
                    function(){ $(this).addClass('hover'); },
                    function(){ $(this).removeClass('hover'); }
                )
                return autoMail.list;
            }
            //序列化列表
            autoMail.order = function(_value){
                $('.name',autoMail.list).remove();
                var name = $('<span class="name">'+ _value +'</span>');
                $('.item',autoMail.list).prepend(name);
            }
            //添加列表
            autoMail.add = function(){
                if(typeof autoMail.list == 'undefined' || autoMail.list.length < 1) autoMail.create();
            }
            //移除列表
            autoMail.remove = function(){
                if(autoMail.list.length > 0){
                    autoMail.list.remove();
                    delete autoMail.list;
                }
            }
            //获取值
            autoMail.getVal = function(obj){
                if($('.name',obj).text() != ''){
                    var selectValue = obj.text();
                    autoMail.val(selectValue);  
                }else{
                    return false;
                }
            }
            //键盘操作
            autoMail.keyOperate = function(_index){
                $('.item',autoMail.list).eq(_index).addClass('hover').siblings('.item').removeClass('hover');
                autoMail.val($('.item',autoMail.list).eq(_index).text());
            }
            //开始初始话动作...
            autoMail.init();
        }
    })(jQuery)

})

复制代码 代码如下:

复制代码 代码如下:

  今天来写下类似于百度搜索的一个东西,获取百度接口,利用jsonp获取百度数据 ,实现百度框搜索的功能!

服务端的代码,我们这里选择JSP,也可以使用PHP,服务端无所谓,关键是传送数据。

代码如下: (function($){ $.fn.autoMail = function(options){ var autoMail = $(this); var _value = ''; var _index = -1; var _width = autoMail.outerWidth(); var _heigh...

还有我们封装的一个jsonp的一个js   这只是个插件  直接引入即可

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"; 
<html xmlns="" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>搜索词自动完成</title> 
<style type="text/css"> 
#search{ 
text-align: center;
position:relative;
}
.autocomplete{
border: 1px solid #9ACCFB;
background-color: white;
text-align: left;
}
.autocomplete li{
list-style-type: none;
}
.clickable {
cursor: default;
}
.highlight {
background-color: #9ACCFB;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//取得div层
var $search = $('#search');
//取得输入框JQuery对象
var $searchInput = $search.find('#search-text');
//关闭浏览器提供给输入框的自动完成
$searchInput.attr('autocomplete','off');
//创建自动完成的下拉列表,用于显示服务器返回的数据,插入在搜索按钮的后面,等显示的时候再调整位置
var $autocomplete = $('<div class="autocomplete"></div>')
.hide()
.insertAfter('#submit');
//清空下拉列表的内容并且隐藏下拉列表区
var clear = function(){
$autocomplete.empty().hide();
};
//注册事件,当输入框失去焦点的时候清空下拉列表并隐藏
$searchInput.blur(function(){
setTimeout(clear,500);
});
//下拉列表中高亮的项目的索引,当显示下拉列表项的时候,移动鼠标或者键盘的上下键就会移动高亮的项目,想百度搜索那样
var selectedItem = null;
//timeout的ID
var timeoutid = null;
//设置下拉项的高亮背景
var setSelectedItem = function(item){
//更新索引变量
selectedItem = item ;
//按上下键是循环显示的,小于0就置成最大的值,大于最大值就置成0
if(selectedItem < 0){
selectedItem = $autocomplete.find('li').length - 1;
}
else if(selectedItem > $autocomplete.find('li').length-1 ) {
selectedItem = 0;
}
//首先移除其他列表项的高亮背景,然后再高亮当前索引的背景
$autocomplete.find('li').removeClass('highlight')
.eq(selectedItem).addClass('highlight');
};
var ajax_request = function(){
//ajax服务端通信
$.ajax({
'url':'/test/index.jsp', //服务器的地址
'data':{'search-text':$searchInput.val()}, //参数
'dataType':'json', //返回数据类型
'type':'POST', //请求类型
'success':function(data){
if(data.length) {
//遍历data,添加到自动完成区
$.each(data, function(index,term) {
//创建li标签,添加到下拉列表中
$('<li></li>').text(term).appendTo($autocomplete)
.addClass('clickable')
.hover(function(){
//下拉列表每一项的事件,鼠标移进去的操作
$(this).siblings().removeClass('highlight');
$(this).addClass('highlight');
selectedItem = index;
},function(){
//下拉列表每一项的事件,鼠标离开的操作
$(this).removeClass('highlight');
//当鼠标离开时索引置-1,当作标记
selectedItem = -1;
})
.click(function(){
//鼠标单击下拉列表的这一项的话,就将这一项的值添加到输入框中
$searchInput.val(term);
//清空并隐藏下拉列表
$autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置,然后显示下拉列表
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width',$searchInput.css('width'));
$autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
setSelectedItem(0);
//显示下拉列表
$autocomplete.show();
}
}
});
};
//对输入框进行事件注册
$searchInput
.keyup(function(event) {
//字母数字,退格,空格
if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) {
//首先删除下拉列表中的信息
$autocomplete.empty().hide();
clearTimeout(timeoutid);
timeoutid = setTimeout(ajax_request,100);
}
else if(event.keyCode == 38){
//上
//selectedItem = -1 代表鼠标离开
if(selectedItem == -1){
setSelectedItem($autocomplete.find('li').length-1);
}
else {
//索引减1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
}
else if(event.keyCode == 40) {
//下
//selectedItem = -1 代表鼠标离开
if(selectedItem == -1){
setSelectedItem(0);
}
else {
//索引加1
setSelectedItem(selectedItem + 1);
}
event.preventDefault();
}
})
.keypress(function(event){
//enter键
if(event.keyCode == 13) {
//列表为空或者鼠标离开导致当前没有索引值
if($autocomplete.find('li').length == 0 || selectedItem == -1) {
return;
}
$searchInput.val($autocomplete.find('li').eq(selectedItem).text());
$autocomplete.empty().hide();
event.preventDefault();
}
})
.keydown(function(event){
//esc键
if(event.keyCode == 27 ) {
$autocomplete.empty().hide();
event.preventDefault();
}
});
//注册窗口大小改变的事件,重新调整下拉列表的位置
$(window).resize(function() {
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width',$searchInput.css('width'));
$autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
});
});
</script>
</head>
<body>
<div id = "search">
<label for="search-text">请输入关键词</label><input type="text" id="search-text" name="search-text" />
<input type="button" id="submit" value="搜索"/>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="./jquery.js"></script>
        <script type="text/javascript" src="./autoMail.js"></script>
        <script type="text/javascript">
        $(function(){
            $('.automail').autoMail();
        }) 
        </script>
        <style type="text/css">
        *{padding: 0; margin: 0;}
        body{font-family: "微软雅黑"; color: #333; font-size: 12px;}
        ul{list-style: none;}
        input{ width: 180px; height: 16px; line-height: 16px; margin: 100px; padding: 4px; border: 1px solid #aaa; font-size: 12px; font-family: "微软雅黑"; }
        .list-mail ul{ border: 1px solid #aaa; line-heihgt: 24px; padding: 6px; }
        .list-mail li{ cursor: pointer; padding: 2px 3px; margin-bottom: 2px; }
        .list-mail .name{ color: #982114; }
        .list-mail .hover{ background: #fefacf; }
        .list-mail .select{ background: #dedaae; }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <input type="text" class="automail" />
    </body>
</html>

index == 0 ? index = $("#ul11>li").length : null;    //同上  判断

澳门新濠3559 1

(function($){
    $.fn.autoMail = function(options){
        var autoMail = $(this);
        var _value   = '';
        var _index   = -1;
        var _width   = autoMail.outerWidth();
        var _height  = autoMail.outerHeight();
        var _left    = autoMail.offset().left;
        var _top     = autoMail.offset().top;
        autoMail.defaults = {
            deValue : '请输入邮箱地址',
            textCls : 'text-gray',
            listCls : 'list-mail',
            listTop : 1,
            mailArr  : ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"]
        }
        //初始化
        autoMail.init = function(){
            autoMail.vars = $.extend({},autoMail.defaults,options);
            autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls);
            autoMail.click(function(event){
                autoMail.select().removeClass(autoMail.vars.textCls);
                if(autoMail.val() != autoMail.vars.deValue){
                    autoMail.add();
                    autoMail.order(_value);
                    autoMail.list.find('.item').each(function(){
                        if($(this).text() == autoMail.val()){
                            $(this).siblings('.item').removeClass('select');
                            $(this).addClass('select');
                            return false;
                        }
                    })
                }
                event.stopPropagation();
            })
            autoMail.blur(function(event){
                if(autoMail.val() == '' || autoMail.val() == autoMail.vars.deValue){
                    alert(autoMail.val())
                    autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls);
                }
            })
            //文本域键盘松开事件
            autoMail.keyup(function(event){
                if($(autoMail.list).length == 0){
                    autoMail.add();
                }
                if(autoMail.list.length > 0){
                    var keyCode = event.keyCode;
                    //alert(keyCode)
                    switch(keyCode){
                        case 13:
                            autoMail.remove();
                            autoMail.blur();
                            break;
                        case 38:
                            _index--;
                            if(_index < 0){
                                _index = 0;
                            }
                            autoMail.keyOperate(_index);
                            break;
                        case 40:
                            _index++;
                            if(_index > $('.item',autoMail.list).length - 1){
                                _index = ('.item',autoMail.list).length

 

废话不多说,直观的看一下:

$("#txt").val($("#ul11>li").eq(index).text());   //同上

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String []words = {"amani","abc","apple","abstract","an","bike","byebye",
"beat","be","bing","come","cup","class","calendar","china"};
if(request.getParameter("search-text") != null) {
String key = request.getParameter("search-text");
if(key.length() != 0){
String json="[";
for(int i = 0; i < words.length; i++) {
if(words[i].startsWith(key)){
json += """+ words[i] + """ + ",";
}
}
json = json.substring(0,json.length()-1>0?json.length()-1:1);
json += "]";
System.out.println("json:" + json);
out.println(json);
}
}
%>

location.href = ''';

整个过程思路其实挺清晰的,首先在输入框上注册keyup事件,然后在事件中通过ajax获取json对象。取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当我们点击每一项的时候,就可以响应事件。键盘导航的关键是记录当前高亮的索引值,根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置,当浏览器的大小改变时,随时调整下拉列表的位置。
JQuery是web前端的利器,有机会的话,大家一定要看一下。

jsonp({
      url: '',  //获取百度接口
      data: {
           wd: oTxt.value     //data  要搜索的内容
          },
         cbName:"cb",     //cbName  = cb
         success: function (json) {    //成功时有一个回调函数    json是获取到的数据   
         var str = "";      //设置一个 空的字符串
         for (var i in json.s) {      //遍历  数据里的s
         str += "<li><a href=';" + json.s[i] + "</a></li>"    //str  里添加li
         }
        $('#ul11').html(str);    //ul里添加li
        }
    })

复制代码 代码如下:

基本的就时这些了   如果还有那些不明白的 或者想要  封装好的jsonp的js  给我留言  咱们一起讨论吧!

  实现这个功能需要服务端配合。客户端通过脚本来展示从服务端取得的数据。

$("#txt").val($("#ul11>li").eq(index).text());    //搜索框里的内容就是 你选择的当前的li的内容

  我是用jq来些的  ,我们先引入jq。

}else{

澳门新濠3559 2

}else if(event.keyCode == 13) {   //当键码为13  13为Enter  确认键

 $("#ul11>li").eq(index).css("background", "#ccc").siblings("li").css("background", "none");  //同上

<script src= baidujsonp.js>

 

来写我们的html代码

效果是这样的

if(event.keyCode==40){         //键码为40  向上键

  因为当我们的键盘抬起的时候就开始获取百度的数据了,所以我们给搜索框来个键盘松开事件抬起事件

event = event||window.event   //获取event事件

  var  oTxt = document.getElenentById("txt")  //获取input

index--;

}else if(event.keyCode == 38){  // 键码为38  向下键 

<div style="width: 40%; margin: 100px auto;">
     <input type="text" id="txt" style="width: 100%; height: 30px;"/>
     <ul id="ul11" ></ul>
</div>

  $("#txt").on('keyup',function(event){

$("#ul11>li").eq(index).css("background", "#ccc").siblings("li").css("background", "none");  // 当前下标的li 的css背景颜色 为灰色 他的兄弟li背景颜色为空

  <script src="jquery.min.js>

}

index==$("#ul11>li").length - 1 ? index=-1 :null;    //三目运算符 判断下标是否等于li 的长度  成立 下标等于-1 不成立则为空

编辑:数据库 本文来源:澳门新濠3559获取百度接口,  实现这个功能需

关键词:

  • 上一篇:没有了
  • 下一篇:没有了