1.js仿百度搜索框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function show(json){ let oUl=document.getElementById('ul1'); oUl.innerHTML=''; json.s.forEach(str=>{ let oLi=document.createElement('li'); oLi.innerHTML=str; oUl.appendChild(oLi); }) } </script> <script> window.onload=function(){ let oTxt=document.getElementById('txt1'); let oUl=document.getElementById('ul1'); oTxt.oninput=function(){ let oS=document.createElement('script'); oS.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oTxt.value}&cb=show`; document.head.appendChild(oS); } } </script> </head> <body> <input type="text" id="txt1"> <ul id="ul1"> </ul> </body> </html>
2.jq仿百度搜索框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery.js"> </script> <script> $(function(){ $('#txt1').on('input',function(){ $.ajax({ url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', data:{wd:$('#txt1').val()}, dataType:'jsonp', jsonp:'cb', success(json){ $('#ul1').html(''); json.s.forEach(str=>{ $(`<li>${str}</li>`).appendTo($('#ul1')); }) }, error(){ alert('错了') } }) }) }) </script> </head> <body> <input type="text" id="txt1"> <ul id="ul1"> </ul> </body> </html>