HTML-форма/PHP получить текст ввода LIVE

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 
    $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, поскольку у меня есть его в файле db.php. Там файл получает вход и сопоставляется с 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">