凌的博客

您现在的位置是:首页  > 前端学习 > Js

Js

jquery - jsonp - 获取百度提示内容

2016-09-21Js0
<!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>无标题文档</title> <script src=\"/themes/default/static/js/jquery.min.js\"></script> <scr
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="/themes/default/static/js/jquery.min.js"></script>
<script>

 function FillUrls(keyword){
  keyword = keyword || 'a';
  var qsData = { 'wd': keyword, 'p': '3', 'cb': 'getData', 't': new Date().getMilliseconds().toString() };
  $.ajax({
   async: false,
   url: "http://suggestion.baidu.com/su",
   type: "GET",
   dataType: 'jsonp',
   jsonp: 'jsoncallback',
   data: qsData,
   timeout: 5000,
   success: function (json) {
   },
   error: function (xhr) {
   }
 });
	 
}
 
 
 function getData(data) {
  var Info = data['s']; //获取异步数据
  console.log(Info);
 } 
 
 
 var timeoutId; //延迟请求服务器
var highlightindex = -1; //高亮标记
$(function () {
 $("#searchText").keyup(function (event) {
  var myEvent = event || window.event;
  var keyCode = myEvent.keyCode;
  //console.log(keyCode);
  var keyword = $(this).val();
  //监控键盘
  if (keyCode >= 65 && keyCode <= 90 || keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 111 || keyCode >= 186 && keyCode <= 222 || keyCode == 8 || keyCode == 46 || keyCode == 32 || keyCode == 13) {
   //延时操作
   clearTimeout(timeoutId);
   timeoutId = setTimeout(function () {
      timeoutId = FillUrls(keyword);
   }, 500)
  // FillUrls(keyword); //异步请求
   if (highlightindex != -1) {
    highlightindex = -1;
   }
  }
  else if (keyCode == 38 || keyCode == 40) {
   if (keyCode == 38) {  //向上
    var autoNodes = $("#auto").children("div")
    if (highlightindex != -1) {
     autoNodes.eq(highlightindex).css("background-color", "white");
     highlightindex--;
    } else {
     highlightindex = autoNodes.length - 1;
    }
    if (highlightindex == -1) {
     highlightindex = autoNodes.length - 1;
    }
    autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
    var comText = autoNodes.eq(highlightindex).text();
    $("#searchText").val(comText);
   }
   if (keyCode == 40) { //向下
    var autoNodes = $("#auto").children("div")
    if (highlightindex != -1) {
     autoNodes.eq(highlightindex).css("background-color", "white");
    }
    highlightindex++;
    if (highlightindex == autoNodes.length) {
     highlightindex = 0;
    }
    autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
    var comText = autoNodes.eq(highlightindex).text();
    $("#searchText").val(comText);
   }
  } else if (keyCode == 13) {  //回车
   if (highlightindex != -1) {
    var comText = $("#auto").hide().children("div").eq(highlightindex).text();
    highlightindex = -1;
    $("#searchText").val(comText);
   } else {
    $("#auto").hide();
    $("#searchText").get(0).blur();
   }
  } else if (keyCode == 27) { //按下Esc 隐藏弹出层
   if ($("#auto").is(":visible")) {
    $("#auto").hide();
   }
  }
});

});
 
</script>
</head>
<body>
<input type="text" id="searchText" />
<div id="auto"></div>
</body>
</html>

如果本文对您有所帮助,请支持下本站哦!!!^_^

文章评论

0条评论