Heim > Artikel > Backend-Entwicklung > Ausführliche Erläuterung von Beispielen für die Nachahmung von Baidu-Abfrage-Dropdown-Inhalten mit PHP und Ajax

Ausführliche Erläuterung von Beispielen für die Nachahmung von Baidu-Abfrage-Dropdown-Inhalten mit PHP und Ajax

黄舟Original: 2017-10-21 09:41:591321Durchsuche

Detailliertes Beispiel für die Verwendung von PHP und Ajax zur Nachahmung von Baidu-Abfrage-Dropdown-Inhalten

Der laufende Effekt ist wie folgt:

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <style type="text/css">
    body{
      margin:0;
      padding: 0;
    }
    form{
      width: 500px;
      margin:40px auto;
    }
    .search-wrap{
      position: relative;
    }
    li{
      padding: 0;
      padding-left: 10px;
      list-style: none;
    }
    li:hover{
      background-color: #ccc;
      color: #fff;
      cursor: pointer;
    }
    #xiala{
      position: absolute;
      top: 40px;
      left: 0;
      background-color: #c2c2c2;
      width: 200px;
      margin:0;
      padding: 0 ;
      display: none;
    }
  </style>
</head>
<body>
  <form action="">
    <p class="search-wrap">
      <input type="text" id="search">
      <ul id="xiala">
      </ul>
      <input type="button" value="go" id="sousuo">
      <p id="searVal" style="display:inline-block;border:1px solid #ccc"></p>
    </p>
  </form>
</body>
<script type="text/javascript">
  var search=$("#search");
  search.on("input",function(){  //输入框内容改变发请求
    $.ajax({
      url:&#39;a.txt&#39;,
      type:&#39;GET&#39;,
      async:true,
      data:{value:$("#search").val()},
      success:function(data){
        var arr=data.split(&#39;,&#39;);
        console.log(arr);
        $("#xiala").html("");
        $.each(arr,function(i,n){
          var oLi=$("<li>"+arr[i]+"</li>");
          $("#xiala").append(oLi);
          $("#xiala").css("display","block");
        })
      }
    });
    $("#xiala").css("display","block");       //内容改变下拉框显示
    $("#searVal").html(search.val())
  })
  function stopPropagation(e) {
    if (e.stopPropagation){
       e.stopPropagation();
    }else{
     e.cancelBubble = true;
    }
  }
  $(document).on(&#39;click&#39;,function(){     //点击页面的时候下拉框隐藏
    $("#xiala").css("display","none");
  });
  $(document).on("click","#xiala li",function(){ //点击下拉框选项的时候改变输入框的值
    search.val($(this).text());
    $("#searVal").html($(this).text());
    $("#xiala").css("display","none");
  })
</script>
</html>

a.txt-Inhalt:

a,b,c,d,e,f,g

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Nachahmung von Baidu-Abfrage-Dropdown-Inhalten mit PHP und Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine detaillierte Einführung in die beste Sekundärentwicklung von cmsNächster Artikel：Eine detaillierte Einführung in die beste Sekundärentwicklung von cms

In Verbindung stehende Artikel

Mehr sehen