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:'a.txt', type:'GET', async:true, data:{value:$("#search").val()}, success:function(data){ var arr=data.split(','); 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('click',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,b,c,d,e,f,g
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!