html搜索框下拉怎么做,⼀步⼀步教你实现仿百度搜索框下拉效
果（上）
最终效果(chrome 下)： 搜索框下拉 demo
今天就来简单讲解下如何做这样⼀个类似百度搜索框的下拉效果。
1、html 以及 css 部分
⾸先你得要有个输⼊框，这⾥我⽤了  控件，其次当⽤户在输⼊框中输⼊内容后，下拉效果随即出现，⽐如在我的代码中最多会出现 10 个联想词，那么就得写 10 个 div(来显⽰这些词)，这⾥我⽤了 table 元素，这⾥注意 table 中的 td 元素还得有个 hover 后变⾊的效果。html 和 css 部分相对来说还是⽐较简单的，直接看代码。
html 部分：
td>tr>
td>tr>
td>tr>
td>tr>
td>tr>
td>tr>
td>tr>
td>tr>
td>tr>
td>tr>
tbody>
table>
css 部分:
height:24px;
width:535px;
font-size:20px;
}
table {
font-family:'微软雅⿊', '宋体', '⿊体';
}
td {
background-color:rgb(249,252,255);
height:24px;
width:535px;
}
td:hover {
background-color: rgb(168,213,252);
cursor:default;
}style>
2、Javascript 部分之数据的获取
很显然，demo 的核⼼是数据的获取，也就是说当⽤户输⼊⼀些词汇的时候，你怎么去到那些联想词。在之前，我⼀直以为百度⾸页是⽤ ajax 去调⽤接⼝的，其实不然，原来是 jsonp。其实也很好理解，很多⽹址导航⽹站或者个⼈⽹站都有百度搜索，如果是⽤ ajax 去调⽤的，除⾮设置了 CORS，否则根据同源策略就取不到数据了嘛！所以 jsonp 还是个很好的办法。
我们可以打开 2345⽹址导航 的⾸页，调出 chrome 下的 network ⾯板，在⽹页的百度搜索框处随便输⼊⼀些字符(⽐如s)，这时就会在 network ⾯板下发现⼀些 http 请求，其中我们要的就是以下这个了：
在 network ⾯板下发现⼀些 http 请求，其中我们要的就是以下这个了：
看该请求的 url，很明显是个 jsonp 获取数据的格式，cb 后⾯跟着的就是 callback 的函数名嘛，你也可以把这个 url 在浏览器中打开，返回的是⼀个包裹着 json 数据的函数执⾏。
既然2345⽹址导航能⽤百度的接⼝，当然我们⾃⼰写的⽹页也可以啦。我们可以动态插⼊⼀个 script 标签，然后把 src 属性指向该接⼝的 url(url中需要约定⼀个回调函数的函数名)，然后再写个函数来处理数据，⽐如这样：
var s = ateElement('script');
s.src = 'unionsug.baidu/su?wd=' + encodeURI(im()) + '&p=3&cb=fn';
document.body.appendChild(s);
function fn(data){
var tds = document.querySelectorAll('td');
data.s.forEach(function(item, index){
tds[index].style.display = '';
tds[index].innerHTML = item;
});
// delete scripts
var s = document.querySelectorAll('script');
for (var i = 1, len = s.length; i < len; i++) {
veChild(s[i]);
}
}
注意执⾏完 fn 函数后，也就是说我们已经处理完了得到的数据(数据已经展⽰在了 table 中)，那么就可以把这个动态插⼊的脚本删掉了(delete scripts)。
3、Javascript 部分之其他逻辑处理
解决了这个最重要的环节，其他的就是⼀些细节问题了。
⽐如说这⾥我是监听了输⼊框的 keyup 事件；⽐如在编码的过程中要⽤ encodeURI() 函数；在获取输⼊框内容的时候我⽤了 trim() 函数；点击联想词会打开新页⾯，这⾥我⽤了事件委托；在输⼊框内输⼊后出现联想词，然后点击空⽩区域，联想词就会消失。都是⼀些很细节的东西。
4、总结
其实做出效果并不难，个⼈觉得 demo 的难度是要兼容，特别是兼容 ie6 这样坑爹的浏览器，⼀些⾼级 api 不能⽤，甚⾄连 hover 都不⽀持。所以这只是上篇，给出⼀个具体的思路，⽽下篇则会进⾏兼容性的修改，代码会⼤换⾎的感觉。
如何制作一个个人网页源码参考：搜索框下拉 demo 源码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。