Question

这是我的编码。这个编码允许我在我的数据库中搜索关键字，它工作正常。但是如何在不单击搜索按钮的情况下搜索关键字？我想要的是与谷歌搜索中的搜索功能相同。它可以自动帮助您搜索和查看，而无需点击任何按钮。

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

Answer 1

嗯，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。

最后说明：谷歌没有这样做。实现超快搜索结果的最佳方法是使用WebSockets维护与服务器的套接字连接，并让搜索通过文件数据库（如Elasticsearch）运行，该数据库针对全文搜索进行了优化。

Answer 2

第1步：

为您的输入字段提供ID ...

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

第2步：

on keyUp将搜索变量挂入vaiable并通过AJAX传递给＆＃34; findit.php＆＃34;

<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步：

现在创建一个名为＆＃34; findit.php＆＃34;的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
    }
}
?>

在textarea中自动搜索关键字

2 个答案: