Question

可能重复：
Focus Input Box On Load

我需要一个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);
}

您可以自行格式化div或HTML对象，并在其上定义“search_results”类。

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

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

1 个答案: