Ausführliche Erklärung, wie man eine einfache automatische Suchfeld-Eingabeaufforderungsfunktion in PHP implementiert-PHP-Tutorial-php.cn

Ausführliche Erklärung, wie man eine einfache automatische Suchfeld-Eingabeaufforderungsfunktion in PHP implementiert

*文

Freigeben： 2023-03-19 06:50:01

Original

4509 Leute haben es durchsucht

Wie implementiert man eine einfache automatische Suchfeld-Eingabeaufforderungsfunktion? In diesem Artikel wird hauptsächlich die von php + mysql + jquery implementierte einfache automatische Vervollständigungsaufforderungsfunktion vorgestellt, die die Betriebsfähigkeiten im Zusammenhang mit der Ajax-Datenbankabfrage und der dynamischen Ereignisantwort basierend auf jQuery umfasst. Freunde in Not können sich darauf beziehen. Ich hoffe, es hilft allen.

Die Details sind wie folgt:

Ich habe in diesem Zeitraum einige Inhalte über Eingabeaufforderungen zur automatischen Vervollständigung gelesen und festgestellt, dass die meisten Implementierungsprozesse sehr kompliziert sind. Ich dachte, dass dies eine relativ einfache Funktion sein sollte, also habe ich es selbst ausprobiert. Die Idee ist sehr konventionell. Es ist zu beachten, dass keine Tastaturereignisse an den Eingabeaufforderungsinhalt gebunden sind und nur mit der Maus bedient werden können.

html+jQuery-Inhalt:

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

Nach dem Login kopieren

stuSearch.php-Code

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

Nach dem Login kopieren

Rendering

Bei der Eingabe:

Nach dem Klicken auf einen Artikel:

Verwandte Empfehlungen:

Detaillierte Erklärung, wie man Sudoku in PHP löst

Detaillierte Erklärung, wie man Daten dynamisch an Highcharts über PHP überträgt

Detaillierte Erklärung, wie PHP zeitkritischen Chiffretext generiert

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man eine einfache automatische Suchfeld-Eingabeaufforderungsfunktion in PHP implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!