javascript - HTML 搜索表单允许立即输入文本

Question

可能重复：
加载时聚焦输入框

我需要一个允许立即输入文本的 HTML 搜索表单。和谷歌一样。我们不需要点击将文本输入到搜索表单中

Answer 1

您正在寻找的东西可以通过几种不同的方式来实现。最简单的方法是通过 jquery 的 AJAX POST。我给你举个小例子：

假设您的搜索输入具有名称属性，例如“关键字”

$(function(){  
  $("input[name='keywords']").keyup(function(){
    $(".search_results").slideUp("normal", function(){
      $.ajax({  
        type: "POST", url: "searchquery.php", 
        data: {keywords: $(this).val()},
        success: function(response){
          if(response != "error")
          {
            $(".search_results").html(response);
            $(".search_results").slideDown();
          }
          else
          {
            alert("Error Searching. Please refresh the page and try again.");
          }
        }
      });
    });
  });
});

然后您需要让 searchquery.php 处理搜索数据库并以 html 格式返回数据。也许是这样的：

if(trim($_POST["keywords"]) != "")
{
  $keywords = mysql_real_escape_string($_POST["keywords"]);

  //search the DB for maybe 5 top results and return them in something like a HTML list:
  $results = '<ul><li>first</li><li>second</li></ul>';

  die($results);
}

您可以自行使用在其上定义的类“search_results”来格式化 div 或 HTML 对象。

另外，我建议添加一个计时器，以便每次点击“keyup”功能时，它都会记录时间并在允许下一次调用文件之前至少进行_时间。这样，当有人写 1 个单词时，PHP 文件不会被调用 5 次。