Maison >développement back-end >tutoriel php >php+ajax implémente la fonction de contenu déroulant des requêtes

php+ajax implémente la fonction de contenu déroulant des requêtes

墨辰丷original: 2018-05-17 17:35:272207parcourir

Cet article présente principalement la fonction d'interrogation du contenu déroulant avec php+ajax et analyse les techniques d'implémentation associées de php combinées à la fonction de requête dynamique ajax sous la forme d'exemples spécifiques. Les amis dans le besoin peuvent se référer à ce qui suit <.>

Cet article explique les exemples Utilisez php+ajax pour implémenter la fonction de contenu déroulant de requête de type Baidu. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

L'effet de l'opération est le suivant :

code html :

<!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>

Contenu a.txt :

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

Recommandations associées :

Explication détaillée des étapes pour mettre à jour et supprimer la requête d'informations utilisateur dans le framework ThinkPHP

Laravel5 explication détaillée des étapes pour implémenter la correspondance floue et multi- fonction de requête de condition

thinkPHP5 Explication détaillée des étapes pour implémenter la requête de pagination dans le framework

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode PHP pour obtenir la taille et la taille de l'image distanteArticle suivant：Méthode PHP pour obtenir la taille et la taille de l'image distante

Articles Liés

Voir plus