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

Question

I am totally new in jQuery so hope my question be simple: 我是jQuery的新手，希望我的问题很简单：

I wrote a simple jQuery live search program with PHP and mySQL and it works good. 我用PHP和mySQL编写了一个简单的jQuery实时搜索程序，效果很好。

My question is: I want to show search results in a list then select one of the showing results to be written in the text box. 我的问题是：我想在列表中显示搜索结果，然后选择要显示在文本框中的显示结果之一。

HTML code: 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>

My php code: 我的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>";
    }
  }

?>

Any help? 有什么帮助吗？

Answer 1

First look into prepared statement to prevent sql injection at where source like '%$partialStates%' . 首先查看准备好的语句以防止在where source like '%$partialStates%' sql注入。

Then, instead of returning HTML, 然后，不返回HTML，

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

it would be more convenient to work with JSON: 使用JSON会更方便：

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

To select the first returned state, and update the input box. 选择第一个返回状态，并更新输入框。 change 更改

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

to 至

$.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 个解决方案

解决方案1
0 2016-02-03 22:14:40

解决方案2
0 2016-08-12 07:18:19

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

问题描述

2 个解决方案

解决方案1 0 2016-02-03 22:14:40

解决方案2 0 2016-08-12 07:18:19

解决方案1
0 2016-02-03 22:14:40

解决方案2
0 2016-08-12 07:18:19