HTML表单/PHP实时获取输入文本

我正在使用一个HTML表单，通过PHP为我的数据库创建一个搜索字段。现在，当我输入文本并按下按钮时，它就工作了。但是我想让结果动态化，并显示为用户类型。如何从表单live获取文本输入？无需等待用户按下按钮并提交文本

HTML文本字段：

<form action="index.php" method="post">

    <button class="fa fa-search button" name ="submit" type="submit"></button>
    <input class="search" type="text" name="input" placeholder="Søg">
</form>

搜索数据库并打印结果的PHP脚本：

<?php
    $search = $_POST["input"];
    if (isset($_POST['submit'])) {
    echo "<h2> Søgeresultater </h2>";
        $sql = "SELECT name, description, price, image, stock FROM products WHERE LOWER(name) LIKE '%" . $search . "%' OR LOWER(description) LIKE '%" . $search . "%'";
        $result = $conn->query($sql);
        while($row = $result->fetch_assoc()) {
            echo "<br>" . $row["name"]. ": " . $row["description"] ." - Price: " . $row["price"] . " DKK" . " Lagerstatus: ". $row["stock"] . "<br>";
            echo '<img id="image"" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>'; 
        }
    }
?>

---

这是您需要的脚本

创建两个名为index.php的文件作为首页和search.php作为请求和响应页

这是您想要的jquery，它触发keyup函数中的函数，该函数将把您键入的值传递给search.php文件

Jquery:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});

jQuery("#result").live("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$('#searchid').click(function(){
    jQuery("#result").fadeIn();
});
});
</script>

$（函数（）{
$（“.search”）.keyup（函数（）
{ 
var searchid=$（this.val（）；
var dataString='search='+searchid；
如果（搜索ID！=''）
{
$.ajax({
类型：“POST”，
url:“search.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
$（“#结果”）.html（html）.show（）；
}
});
}返回false；
});
jQuery（#result”）.live（“单击”，函数（e）{
var$clicked=$（e.target）；
var$name=$clicked.find（'.name'）.html（）；
var decoded=$（“”）.html（$name）.text（）；
$（'#searchid'）.val（已解码）；
});
jQuery（document）.live（“单击”，函数（e）{
var$clicked=$（e.target）；
如果（！$clicked.hasClass（“搜索”））{
jQuery（“#result”）.fadeOut（）；
}
});
$（'#searchid'）。单击（函数（）{
jQuery（“#result”）.fadeIn（）；
});
});

search.php

search.php文件应该有足够的db凭据，正如我在db.php文件中看到的那样。在那里，文件将获取输入并与数据库匹配，并向您发送响应

<?php
include('db.php');
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select id,name,email from autocomplete where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['name'];
$email=$row['email'];
$b_username='<strong>'.$q.'</strong>';
$b_email='<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<img src="author.PNG" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>

---

您的php脚本现在可读了，为什么不在按钮按下事件中执行一些ajax调用或执行自动建议？@SulthanAllaudeen我不知道如何执行。这就是为什么我要问：）好的，给你写答案；）@CasperTL为了便于阅读，我已经将您的图像转换为问题中的实际代码（因为图像较小）。我注意确保代码与图像完全匹配，以免偏离原始问题的意图。看起来很棒，谢谢你的时间！我试图找出我在代码中定义/分配文本字段的位置：）只是一个简短的说明，jqueryv1.7中已弃用，并在v1.9中删除。为了确保与未来版本的兼容性并努力“证明”代码的未来性，您应该将
.live（）
更改为使用jQuery v1.7中添加的。
<style type="text/css">
    body{ 
        font-family:Tahoma, Geneva, sans-serif;
        font-size:18px;
    }
    .content{
        width:900px;
        margin:0 auto;
    }
    #searchid
    {
        width:500px;
        border:solid 1px #000;
        padding:10px;
        font-size:14px;
    }
    #result
    {
        position:absolute;
        width:500px;
        padding:10px;
        display:none;
        margin-top:-1px;
        border-top:0px;
        overflow:hidden;
        border:1px #CCC solid;
        background-color: white;
    }
    .show
    {
        padding:10px; 
        border-bottom:1px #999 dashed;
        font-size:15px; 
        height:50px;
    }
    .show:hover
    {
        background:#4c66a4;
        color:#FFF;
        cursor:pointer;
    }
</style>
</head>

<body>

<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for people" />&nbsp; &nbsp; Ex:arunkumar, shanmu, vicky<br /> 
<div id="result">