js仿百度搜索框

Posted 逗比煎饼侠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js仿百度搜索框相关的知识，希望对你有一定的参考价值。

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仿百度搜索框的主要内容，如果未能解决你的问题，请参考以下文章

仿百度搜索提示框效果

Ajax-仿百度的下拉搜索

仿百度搜索（AJAX）

vue-resource使用 (vue仿百度搜索)

百度搜索下拉框提示代码 opensug.js

ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆