Php 如何在可选列表中查看实时搜索结果？_Php_Jquery_Html_Mysql_Css

Php 如何在可选列表中查看实时搜索结果？

php jquery html mysql css

Php 如何在可选列表中查看实时搜索结果？,php,jquery,html,mysql,css,Php,Jquery,Html,Mysql,Css,我对jQuery一无所知，所以希望我的问题很简单：我用PHP和mySQL编写了一个简单的jQuery实时搜索程序，效果很好我的问题是：我想在列表中显示搜索结果，然后在文本框中选择一个显示结果 HTML代码： <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script

我对jQuery一无所知，所以希望我的问题很简单：

我用PHP和mySQL编写了一个简单的jQuery实时搜索程序，效果很好

我的问题是：我想在列表中显示搜索结果，然后在文本框中选择一个显示结果

HTML代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript">
$(function (){
$(document).on('keyup', '[name="state"]', function() {
     var partialState = $(this).val();
     $.post("getStates.php",{partialState:partialState}, function(data){
        $("#results").html(data);
     });
});
});
</script>
</head>

<body>
   <input type = "text" name = "state" autocomplete = "off"/>
   <br>
   <div id = "results"> </div>
</body>

</html>

<?php

  error_reporting(E_ALL);
  ini_set('display_errors', 1);

  $con = mysqli_connect("localhost", "root", "")
  or die("Failed to connect to the server: " . mysql_error());

  mysqli_select_db($con, "airlines")
  or die("Failed to connect to the database: " . mysql_error());

  $partialStates = strtoupper($_POST['partialState']);

  if(!$partialStates)
  {
     echo "";
  }
  else
  {
     $states = mysqli_query($con,"select distinct source from flights where source like '%$partialStates%'") or die(mysql_error());

    while($row = mysqli_fetch_array($states))
    {
       echo "<div>" . $row['source'] . "</div>";
    }
  }

?>


$（函数（）{
$（document）.on（'keyup'，'[name=“state”]'，function（）{
var partialState=$（this.val（）；
$.post（“getStates.php”，{partialState:partialState}，函数（数据）{
$（“#结果”）.html（数据）；
});
});
});

我的php代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript">
$(function (){
$(document).on('keyup', '[name="state"]', function() {
     var partialState = $(this).val();
     $.post("getStates.php",{partialState:partialState}, function(data){
        $("#results").html(data);
     });
});
});
</script>
</head>

<body>
   <input type = "text" name = "state" autocomplete = "off"/>
   <br>
   <div id = "results"> </div>
</body>

</html>

<?php

  error_reporting(E_ALL);
  ini_set('display_errors', 1);

  $con = mysqli_connect("localhost", "root", "")
  or die("Failed to connect to the server: " . mysql_error());

  mysqli_select_db($con, "airlines")
  or die("Failed to connect to the database: " . mysql_error());

  $partialStates = strtoupper($_POST['partialState']);

  if(!$partialStates)
  {
     echo "";
  }
  else
  {
     $states = mysqli_query($con,"select distinct source from flights where source like '%$partialStates%'") or die(mysql_error());

    while($row = mysqli_fetch_array($states))
    {
       echo "<div>" . $row['source'] . "</div>";
    }
  }

?>

首先查看准备好的语句，以防止源代码“%$partialStates%”处的sql注入。

然后，不是返回HTML

while($row = mysqli_fetch_array($states))
{
echo "<div>" . $row['source'] . "</div>";
}

选择第一个返回的状态，并更新输入框。改变

$.post("getStates.php",{partialState:partialState}, function(data){
    $("#results").html(data);
});

到

我的程序很好，正在显示结果。。我的问题是如何在可选择的列表中显示结果，然后选择其中一个显示结果写入文本框。这如何解决问题？有很多代码，但是0 javascript？欢迎使用堆栈溢出！虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满您的代码，因为这会降低代码和解释的可读性！
<?php
  //PHP Code
  error_reporting(E_ALL);
  ini_set('display_errors', 1);

  $con = mysqli_connect("localhost", "root", "root")
  or die("Failed to connect to the server: " . mysql_error());

  mysqli_select_db($con, "dedecms")
  or die("Failed to connect to the database: " . mysql_error());

  $partialStates = strtoupper($_GET['partialState']);

  if(!$partialStates)
  {
  echo "###";
  }
else
{
 $states = mysqli_query($con,"select typename  from dede_arctype where typename like '%$partialStates%'") or die(mysql_error());
  $sources = array();
  while($row = mysqli_fetch_array($states)) {
  $sources[] = $row['typename'];
}
header('Content-Type: application/json');
 echo json_encode($sources);
}
?>
HTML Code:
<html>
<meta charset="utf-8">
<head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
$(function()
{
$(document).on('mouseout', '[name="state"]', function(){
    var html;
         var partialState = $(this).val();
    $.getJSON("getStates.php",
    {
        partialState: partialState
    }, function(states)
    {
        $('input').val(states[0]);
        $.each(states, function(i, value)
        {
            html += value;
            $("#results").html(html);
        });
    });

});

    </script>
</head>

<body>
    <input type="text" name="state" autocomplete="off" />
    <br>
    <div id="results"> </div>
</body>