先給大家展示下效果圖：
下面一段代碼給大家分享了百度搜索框智能提示案例jsonp的知識(shí)，具體代碼如下所示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度下拉_sug-jquery</title><script src="jquery-1.11.3.js"></script><style>#sug{position: absolute;left: 50%;margin-left: -150px;margin-top: 200px;width: 300px;background: lightGreen;height: 40px;text-align: center;}#sug input{margin-top: 10px;}#list{position: absolute;left: 50%;top:50px;width: 200px;margin-left: -150px;margin-top: 200px;height: auto;background: lightBlue;}#list ul{padding-left: 0px;margin: 0px;}#list ul li{background: lightGray;line-height: 30px;list-style: none;padding-left: 10px;margin-top: 0px;cursor: pointer;}#list ul li.on{background: lightGreen;}</style></head><body><div id="sug"><div><input type="text" id="keyWord" autocomplete=off><input type="button" value="百度一下" id="btn"></div></div><div id="list"></div><script>$(function(){$("#keyWord").keyup(function(e){var kd = $("#keyWord").val();var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+kd;querySUG(url);});});function querySUG(url){document.getElementById('list').innerHTML = '';$.ajax({type : "get",async: true,url : url,dataType : "jsonp",jsonp: "cb",jsonpCallback:"callback",success : function(data){var ul = $("<ul></ul>");$.each(data.s,function(i,element){var e = $("<li></li>").append(element);$(ul).append(e);});$("#list").append(ul);},error:function(){console.log('fail');}});}</script></body></html>以上所述是小編給大家介紹的百度搜索框智能提示案例jsonp，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
