テキストエリアのキーワードを自動検索

これは私のコーディングです。このコーディングは私のデータベースのキーワードを検索することができ、うまくいきました。しかし、検索ボタンをクリックせずにキーワードを検索するにはどうすればよいですか？私が欲しいのは、Google検索の検索機能と同じです。これは自動的にボタンを押すことなく検索やレビューを手助けすることができます。テキストエリアのキーワードを自動検索

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Search Contacts</title> 
    </head> 
    <p><body> 
    <h3>Search Contacts Details</h3> 
    <p>You may search either by first or last name</p> 
    <form method="post" action="search.php?go" id="searchform"> 
     <input type="text" name="question"> 
     <input type="submit" name="submit" value="Search"> 
    </form> 

    <?php 
    if(isset($_POST['submit'])){ 
    if(isset($_GET['go'])){ 
    if(preg_match("/^[ a-zA-Z]+/", $_POST['question'])){ 
    $question=$_POST['question']; 

    $con = mysqli_connect("localhost","root",""); 
    mysqli_select_db($con,"search")or die(mysqli_error($con));; 


    $sql="SELECT id , question FROM question WHERE question LIKE '%" . $question . "%'"; 
    //-run the query against the mysql query function 
    $result=mysqli_query($con, $sql); 

    while ($row=mysqli_fetch_array($result)){ 
      $question =$row['question']; 
      $id=$row['id']; 

    echo "<ul>\n"; 
    echo "<li>" . " " . $question . "</li>\n"; 
    echo "</ul>"; 
    } 
    } 
    else{ 
    echo "<p>Please enter a search query</p>"; 
    } 
    } 
    } 
?> 
    </body> 
</html> 
</p>

出典

2016-05-28 coco

Googleとは少し違っています。しかし、できることはJavaScriptを使用することです（ここではjQueryがおそらく最も簡単です）。XHRを送信すると結果が取得されます。これは、もちろん、この

$('input[name="question"]').on('keyup', function (e) { 
    $.ajax({ 
     url: "search.php?go", 
     method: 'post', 
     data: { 
      query: e.target.val() 
     } 
    }).done(function(data) { 
     // Output your data however you want 
    }); 
}

ようになり、あなたはまた、それはすべてあなたの好みだ、GET HTTPメソッドを使用することができます。

これ以外にも、は、クエリにSQLインジェクションの脆弱性があるように、と思われます。本質的には、'DROP DATABASE questionを検索クエリとして入力すると、データベースが削除されます。あなたがしなければならないことは、Mysql::prepareを使って準備されたステートメントを使用することです。ドキュメントhereを参照してください。

最後の注意：Googleではこのようにしていません。高速検索結果を得る最も良い方法は、WebSocketを使用してサーバーとのソケット接続を維持し、全文検索に最適化されたElasticsearchなどのドキュメントデータベースを検索する方法です。

出典

2016-05-28 09:52:03 Phroggyy

ステップ1：

があなたの入力欄にIDを与える...

<div class="content"> 
<input type="text" class="search" id="searchid" placeholder="Search Here" /> 
<div id="result"></div> 
</div>

ステップ2：keyUpイベントの検索変数に

は「findit AJAX経由vaiableにcathedと渡されます。 PHP」

<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: "findit.php", 
    data: dataString, 
    cache: false, 
    success: function(html) 
    { 
    $("#result").html(html).show(); 
    } 
    }); 
}return false;  
}); 

jQuery("#result").on("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>

ステップ3：

は今の名前「findit.php」のPHPファイルを作成し、以下のコード

include('conn.php'); //this is your DB connection file 
if($_POST) 
{ 
    $q = mysqli_real_escape_string($connection,$_POST['search']); 
    $qry = mysqli_query($connection,"select col_name from tbl_name where col_name like '%$q%' order by col_name LIMIT 7"); 
    while($row=mysqli_fetch_array($qry)) 
    { 
     $col_name = $row['col_name']; 
     $b_res = '<strong>'.$q.'</strong>'; 
     $final_res = str_ireplace($q, $b_res, $col_name); 
     ?> 
     <?php 
    } 
} 
?>

出典

2016-05-28 09:57:26 Kunal

を使用し、私はこのコーディングの結果が何であるかを求めることができますか？私は何かをする必要がありますか、またはテキストエリア内にキーワードを入力するだけですか？私が試してみると何の反応もないからです。 – coco

あなたはカラム名、db接続、それぞれのid ..thats allを置き換えなければなりません。そしてそれはそのあと – Kunal

yaの後に動作するはずです。私はすでに交換しました.. – coco

テキストエリアのキーワードを自動検索

答えて

関連する問題