效果还不错就差加上键盘控制了…
代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title>迷糊网罗& lt;/title>
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
{形式
位置:绝对的;
左:50%;
上图:40%;
}
表单输入:nth-child (1) {
宽度:450 px;
高度:34 px;
浮:左;
字体大小:16 px;
indent: 0.5 em;
大纲:没有;
box-sizing: border-box;
}
表单输入:nth-child(1):{焦点
边界:1 px固体blueviolet;
}
表单输入:nth-child (2) {
高度:34 px;
浮:左;
背景:blueviolet;
光标:指针;
宽度:80 px;
字母间距:2 px;
边界:0;
字体大小:14 px;
行高:34 px;
}
# oul {
位置:绝对的;
左:0;
上图:34 px;
背景:白色;
宽度:530 px;
不必:3 px 3 px 5 px # F3F3F3;
边界:1 px固体# F3F3F3;
box-sizing: border-box;
显示:没有;
}
# oul李:{徘徊
背景:# F3F3F3;
光标:指针;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;表单动作==薄胺椒ā薄皀ame=暗澄谰北?
& lt;输入类型=" name="学生" id=叭帧奔壑?"/比;
& lt;输入类型="按钮" name=暗澄谰眎d=" btn " value=" https://www.yisu.com/zixun/迷糊网罗”/比;
& lt; ul id=皁ul”比;
& lt;/ul>
& lt;/form>
& lt;脚本type=" text/javascript祝辞//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su& # 63; wd=, cb=_=1497256697565//位置调整习惯就好. .
var调频=document.getElementsByTagName(“形式”)[0];
var x=fm.offsetWidth;
var y=fm.offsetHeight;
fm.style。marginLeft=- x/2 +“px”;
fm.style。marginTop=- y/2 +“px”;//获取操作元素
var txt=. getelementbyid (txt);
var oul=. getelementbyid (“oul”);//动态创建js脚本
三种。onkeyup=function (ev) {
var值=https://www.yisu.com/zixun/this.value;
var newscript=document.createElement(“脚本”);
newscript。src=' https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su& # 63; wd=' +价值+”,cb=walk& _=' + math . random ();
newscript。type=' text/javascript ';
document.body.appendChild (newscript);
}//设置回调函数
函数走(walkJson) {
如果(txt)。值=https://www.yisu.com/zixun/=0) {
oul.style。显示='没有';
其他}{
oul.style。显示=翱椤?
oul。innerHTML=";
如果(walkJson.s。长度& lt;=10) {
(var=0;我& lt;walkJson.s.length;我+ +){
var奥利=document.createElement(‘李’);
oli.style。身高=25 +“px”;
oli.style。宽度=100 +‘%’;
oli.style。lineHeight=25 +“px”;
oli.style。textIndent=9 +“px”;
oli.style。listStyle='没有';
奥利。innerHTML=walkJson.s[我];
oul.appendChild(奥利);
}
其他}{
(var=0;我& lt;10;我+ +){
var奥利=document.createElement(‘李’);
oli.style。身高=25 +“px”;
oli.style。宽度=100 +‘%’;
oli.style。lineHeight=25 +“px”;
oli.style。textIndent=9 +“px”;
oli.style。listStyle='没有';
奥利。innerHTML=walkJson.s[我];
oul.appendChild(奥利);
}
}
}
}
& lt;/script>
& lt;/body>
& lt;/html>之前
以上所述是小编给大家介绍的jQuery Jsonp跨域模拟搜索引擎的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
