Heim > Artikel > Backend-Entwicklung > Ausführliche Erklärung, wie man eine einfache automatische Suchfeld-Eingabeaufforderungsfunktion in PHP implementiert

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

*文Original: 2018-01-03 10:07:304429Durchsuche

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>

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung, wie man Sudoku in PHP löstNächster Artikel：Detaillierte Erklärung, wie man Sudoku in PHP löst

In Verbindung stehende Artikel

Mehr sehen