javaScript搜索框

使用百度链接进行数据搜索和跳转

可以搜索内容,聚焦时根据文本框内容进行搜索且进行页面跳转；

缺点 : 文本框失焦时,搜索列表无法收回,之前写了一个清空搜索列表的代码后却无法进行页面跳转

不知道那个大佬帮忙破解一下;

//失焦代码
aInput.onblur = function(){aUlList.innerHTML = null;
}

搜索框代码

<!DOCTYPE html>
<html lang='zh'>
<head><meta charset='UTF-8'><title>mm</title><style>*{margin:0;padding:0;list-style:none;text-decoration:none;color:black;font-size:12px;}.wrap{width:300px;height:40px;margin:50px auto;}input{  width:100%;height:40px;text-indent:1em;border:1px solid #000;border-bottom:0;outline:none;}input:focus{border:1px solid #000;border-bottom:1px solid #ccc;}ul{width:100%;border:1px solid #000;border-top:0;}li{text-indent:1em;padding:5px 0;}li:hover{font-weight:bold;background-color:#eee;}</style>
</head>
<div class="wrap"><input type="text" placeholder="搜索" size="22"><ul></ul>
</div>
<body><script>let aInput = document.querySelector("input"),aUlList = document.querySelector("ul");//文本框中内容发生改变时触发aInput.oninput = getContent;//文本框聚焦时获取内容aInput.onfocus = getContent;//获取文本框内容function getContent(){let val = aInput.value;if(val){let addScript = document.createElement("script");addScript.src = `https://www.baidu.com/sugrec?ie=utf-8&prod=pc&wd=${val}&cb=fmm`;document.body.appendChild(addScript);}else{aUlList.innerHTML = null;}}//搜索显示的列表function fmm(data){let dataArr = data.g,str="";for(let i=0; i<dataArr.length; i++){let strChange = decodeURI(dataArr[i].q),http = `https://www.baidu.com/s?wd=${strChange}&cb=fmm`;str += `<li><a href="${http}">${strChange}</a></li>`;}aUlList.innerHTML = str; }</script>
</body>
</html>

javaScript搜索框相关推荐

web网页设计 JavaScript 搜索框代码
初学JavaScript,略微懂得一点毛皮,得出一点复习经验,在这里分享一下. <!DOCTYPE html> <html lang="en"> <h ...
javascript搜索框联想搜索_JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性回想起来实现此功能很简单,1.前端输入字符串文本改变异步请求服务器将返回的资料显示 ...
javascript搜索框联想搜索_jQuery搜索框效果实现代码(百度关键词联想)
可以实现关键词联想的,搜索框:集合了百度,谷歌,搜狗,360,腾讯等多家搜索 search.html的代码: 搜索框例子 *{margin:0 auto} 站内搜索百度搜索 360搜索腾讯搜索搜 ...
[JavaScript]搜索框中文/英文/拼音匹配过滤逻辑/input的focus和下拉框的click冲突解决/点击条目后focus二次点击不生效问题解决
效果图思路: 输入框的逻辑: 要监控input的输入,根据框架自己选择绑定事件要有focus和blur的方法,input的focus和下拉框的click冲突的话应该用mousedown 展开下拉框 ...
javascript搜索框联想搜索_js实现类似于联想关键词的搜索功能（附代码）
本篇文章给大家带来的内容是关于js实现类似于联想关键词的搜索功能(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.页面代码: js/jQuery实现类似百度搜索功能 #c ...
javascript搜索框联想搜索_js实现输入框联想搜索
//模糊查询 functionSearchLike(jsons) {//var timerSerch = null; $(document).on('keyup', '[name=' + jsons. ...
html 搜索框自动补全,自动完成的搜索框javascript实现
自动完成的搜索框javascript实现 2019-01-04 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现,编程之家 ...
JavaScript实现搜索框效果
要求:搜索框获取焦点的时候如果里面的内容是"请输入关键字",则清空,否则不清空 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
html切换搜索引擎,关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享...
这篇文章主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下废话不多说了,直接给大家贴代码了,具体代码如下所述: #search ...

javaScript搜索框

javaScript搜索框相关推荐

最新文章

热门文章