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>js仿百度搜索框
原文地址：http://www.cnblogs.com/chaofei/p/7857933.html