Question

我是jQuery的新手，所以希望我的问题很简单：

我用PHP和mySQL编写了一个简单的jQuery实时搜索程序，它运行良好。

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

HTML code：

<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代码：

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

?>

任何帮助？

Answer 1

首先查看预防语句以防止在where source like '%$partialStates%'进行sql注入。

然后，而不是返回HTML，

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

使用JSON会更方便：

$sources = array();
while($row = mysqli_fetch_array($states)) {
    $sources[] = $row['source'];
}
header('Content-Type: application/json');
echo json_encode($sources);

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

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

到

$.getJSON( "getStates.php", { partialState: partialState }, function( states ) {
    $('input').val(states[0]);
});

Answer 2

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

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

2 个答案: