Question

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

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'] ).'"/>'; 
        }
    }
?>

Answer 1

这是您需要的脚本

创建两个名为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.php

search.php文件应该在db.php文件中提供足够的db凭据。文件正在获取输入并与db匹配并向您发送响应。

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

样式和HTML

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

HTML表单/ PHP获取输入文本LIVE

1 个答案: