<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: ;
padding: ;
} #wrap {
width: 400px;
margin: 50px auto;
} #wrap input {
width: 380px;
height: 38px;
border: # 1px solid;
padding: 9px;
} #wrap ul {
border: # 1px solid;
width: 398px;
height: auto;
padding: ;
overflow: hidden;
} #wrap ul li {
list-style: none;
width: 380px;
padding: 9px;
height: 30px;
border-bottom: # 1px solid;
line-height: 30px;
} #wrap ul li.on {
background: #c00;
color: #fff;
}
</style>
<script>
function jsonP(json) {
if (!json.url) {
alert('请输入正确的请求路径');
return;
}
json.data = json.data || {};
json.cbName = json.cbName || 'cb';
var fnName = 'show' + Math.random();
fnName = fnName.replace('.', '');
window[fnName] = function (json2) {
json.success && json.success(json2);
oHead.removeChild(oScript);
};
json.data[json.cbName] = fnName;
var arr = [];
for (var name in json.data) {
arr.push(name + '=' + json.data[name]);
}
var oScript = document.createElement('script');
oScript.src = json.url + '?' + arr.join('&');
var oHead = document.getElementsByTagName('head')[];
oHead.appendChild(oScript);
}
window.onload = function () {
var oTxt = document.getElementById('txt');
var oBox = document.getElementById('box');
var iNow = -;
var oldValue;
oTxt.onkeyup = function (ev) {
var oEvent = ev || event;
if(oEvent.keyCode != && oEvent.keyCode != && oEvent.keyCode != ){
jsonP({
url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data: {
wd: oTxt.value
},
success: function (json) {
var arr = json.s;
for (var i = ; i < arr.length; i++) {
var oLi = document.createElement('li');
oLi.innerHTML = arr[i];
oBox.appendChild(oLi);
}
var aLi = oBox.children;
for (var i = ; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function () {
iNow = this.index;
for (var i = ; i < aLi.length; i++) {
aLi[i].className = '';
}
this.className = 'on';
oTxt.value = this.innerHTML;
};
}
}
});
oldValue = oTxt.value;
}
}; oTxt.onkeydown = function (ev) {
var oEvent = ev || event;
var aLi = oBox.children;
if(oEvent.keyCode == ){
iNow++;
if(iNow == aLi.length){
iNow = -;
} for(var i = ; i < aLi.length; i++){
aLi[i].className = '';
}
if(iNow == -){
oTxt.value = oldValue;
}else{
aLi[iNow].className = 'on';
oTxt.value = aLi[iNow].innerHTML;
}
}
if(oEvent.keyCode == ){
iNow--;
if(iNow == -)iNow = aLi.length - ;
for(var i = ; i < aLi.length; i++){
aLi[i].className = '';
}
if(iNow == -){
oTxt.value = oldValue;
}else{
aLi[iNow].className = 'on';
oTxt.value = aLi[iNow].innerHTML;
}
return false;
}
if(oEvent.keyCode == ){
window.open('https://www.baidu.com/s?wd=' + oTxt.value);
}
}
}
</script>
</head>
<body>
<div id="wrap">
<input type="text" id="txt">
<ul id="box"> </ul>
</div>
</body>
</html>

jsonp跨域&百度下拉的更多相关文章

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

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  2. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  3. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  4. vue的jsonp百度下拉菜单

    通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...

  5. 计算机网络之JSONP跨域

    JSONP跨域实现原理 百度联想词跨域实现 一.JSONP跨域实现原理 1.Web页面使用<script>引入JS文件时不受同源策略的影响.准确的说,所有拥有src属性的标签都不受同源策略 ...

  6. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  7. jsonp跨域+ashx(示例)

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  8. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  9. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

随机推荐

  1. 如果将markdown视作一门编程语言可以做哪些有趣的事情?

    如题,然后就有了为解决这个好奇而开的项目:https://github.com/racaljk/llmd 源码主要是parser+interpreter,其中parser使用sundown,然后生成l ...

  2. 航天独角兽Spacex

    2018年2月7日下午3时45分,猎鹰重型火箭在位于卡纳维拉尔角的肯尼迪航天中心LC-39A平台顺利升空.火箭直升云霄,按照既定轨道持续升空,位于美国弗罗里达州卡纳维拉尔角的航天发射中心硝烟四起,非常 ...

  3. requirejs重点

    1.shim:用于配置不是通过define函数包装的文件,导出什么东西,如果这个文件不再baseURL目录下的话,需要在paths中配置文件目录.并且paths中的键名.shim中的键名.requir ...

  4. java 常用模块代码

    1.文件的读写操作 (1)进行读操作 import java.io.BufferedReader; import java.io.FileNotFoundException; import java. ...

  5. spring中的idref标签详解

    spring中的idref元素 idref元素是一个简单的对容器中存在的另外一个bean的检错途径(通过id); <idref bean="someBeanId"/> ...

  6. 洛谷 P2577 [ZJOI2005]午餐

    这道题目比较难想. 题解: 算法:贪心+dp 容易想到贪心:吃饭慢的先打饭节约时间, 所以先将人按吃饭时间从大到小排序. 然后就是dp了: 首先,应该想到f[i][j][k]:前i个人,在1号窗口打饭 ...

  7. 江西理工大学南昌校区排名赛 E: 单身狗的种树游戏

    题目描述 萌樱花是一只单身狗. 萌樱花今天决定种树,于是他来到了自己家的后院. 萌樱花的后院有n个树坑,所有树坑排列在一行上,每一个树坑都可以种一棵树,相邻树坑间的距离为1,现在所有的树坑都是空着的. ...

  8. BZOJ - 3224 可持久化Treap 树形操作

    这个题目去年就做过了,这次稍微改了一下 都是基础操作 #include<iostream> #include<algorithm> #include<cstdio> ...

  9. Counting Divisors HDU - 6069

    设n=p_1^{c_1}p_2^{c_2}...p_m^{c_m}n=p​1​c​1​​​​p​2​c​2​​​​...p​m​c​m​​​​,则d(n^k)=(kc_1+1)(kc_2+1)...( ...

  10. javascript 定时任务封装

    /** * 定时任务 * 间隔时间,执行次数,要带的参数,要执行的函数. */ var TimingTask = function(time,count,param,fun){ this.id = - ...