Maison > Article > développement back-end > Explication détaillée de la façon d'implémenter une fonction d'invite automatique de champ de recherche simple en PHP

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

*文original: 2018-01-03 10:07:304425parcourir

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>

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));
  }
?>

Rendu

Lors de la saisie :

Après avoir cliqué sur un article :

Recommandations associées :

Explication détaillée de la façon de résoudre le Sudoku en PHP

Explication détaillée de la façon de transférer dynamiquement des données vers des highcharts via PHP

Explication détaillée de la façon dont PHP génère un texte chiffré sensible au temps

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：Explication détaillée de la façon de résoudre le Sudoku en PHPArticle suivant：Explication détaillée de la façon de résoudre le Sudoku en PHP

Articles Liés

Voir plus