Explication détaillée de la façon d'implémenter une fonction d'invite automatique de champ de recherche simple en PHP-tutoriel php-php.cn

Explication détaillée de la façon d'implémenter une fonction d'invite automatique de champ de recherche simple en PHP

*文

Libérer： 2023-03-19 06:50:01

original

4516 Les gens l'ont consulté

Comment implémenter une fonction d'invite automatique de champ de recherche simple ? Cet article présente principalement la fonction d'invite de complétion automatique de récupération simple implémentée par php+mysql+jquery, impliquant les compétences opérationnelles liées à la requête de base de données ajax et à la réponse dynamique d'événement basée sur jQuery. Les amis dans le besoin peuvent s'y référer. J'espère que cela aide tout le monde.

Les détails sont les suivants :

J'ai lu du contenu sur les invites de saisie semi-automatique pendant cette période et j'ai constaté que la plupart des processus de mise en œuvre sont très compliqués. Je pensais que cela devrait être une fonction relativement simple, alors je l'ai essayé moi-même. L'idée est très conventionnelle. Il convient de noter qu'il n'y a pas d'événements clavier liés au contenu de l'invite et qu'ils ne peuvent être actionnés qu'avec la souris.

Contenu HTML+jQuery :

<html>
<head>
  <style type="text/css">
    #autoBox
    {
      margin: 0px;
      padding: 0px;
      border: 1px solid #CCCCCC;
      width: 200px;
    }
    #autoBox li
    {
      clear: both;
      background-color: white;
      color: black;
      position: relative;
      top: 0px;
      left: 0px;
      line-height: 25px;
      width:200px;
      text-align: left;
      overflow: hidden;
    }
    #autoBox li:hover
    {
      background-color: gray;
      color: yellow;
      cursor: pointer;
    }
  </style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  $(function(){
    $.ajaxSetup({cache:false}) ; //不缓存
    //以下代码用于显示检索提示框
    $("#autoBox").hide(); //初始化时隐藏补全提示框
    $("#stuSearch").keyup(function(){ //输入框中的keyup事件激活以下查询行为
      $("#autoBox").html(""); //先清空补全提示框原有内容
      if($("#stuSearch").val().length>0) // 如果输入框不为空
      {
        $.ajax({ //后台调用php文件进行查询
          type:"post",
          url:"phpFiles/stuSearch.php",
          dataType:"json",
          data:{keywords:$("#stuSearch").val()},
          success:function(feedbackdata)
            {
              $("#autoBox").show();// 显示补全提示框
              for(i=0;i<feedbackdata.length;i++) //将结果添加到提示框中
              {
                $("#autoBox").append("<li>"+feedbackdata[i][&#39;truename&#39;]+"</li>");
              }
              $("#autoBox li").on("click",function(){ //为这些新增的li绑定单击事件，单击后将其值赋到输入框中
                $("#stuSearch").val($(this).text());
              })
              $("#autoBox").append("<li style=&#39;text-align:right&#39;>关闭</li>");//在提示框的最后添加一个li用来关闭
              $("#autoBox li:last").on("click",function(){ // 添加单击事件，单击后隐藏提示框
                $("#autoBox").hide();
              })
            }
        });
      }
    })
  })
</script>
</head>
<body>
<input type="text" placeholder="输入您想检索的关键词后回车。" id="stuSearch" name="stuSearch"/>
<ul id="autoBox">
</ul>
</body>
</html>

Copier après la connexion

Code stuSearch.php

<?php
  include &#39;../phpFiles/connMysql.php&#39;;
  $keywords=$_POST[&#39;keywords&#39;];
  $myrs=mysql_query("select * from users where truename like &#39;".$keywords."%&#39;");
  if($myrs)
  {
    while($row=mysql_fetch_array($myrs))
    {
      $temp[]=$row;
    }
    echo(json_encode($temp));
  }
?>

Copier après la connexion

Rendu

Lors de la saisie :