Question

我尝试使用可能适用于 AJAX ， Javascript ， JQuery 和 PHP ，但我还没有找到一种方法来实现我的方案的正确结果。

我有一个搜索框文本输入字段：

<input id="field" name="q" maxlength="2048" autocomplete="off" title="Search" type="text" value="" spellcheck="false" autofocus>

有三种情况需要采取不同的行动：

在页面加载时，在后台每5秒将输入发送到search-api.php POST，然后从操作中获取结果，并将响应设置为$url 。（不仅要显示第一次提交的响应，还要显示每5秒更新一次的输入更改）。

按下输入按钮后，将输入作为GET发送到前台的 https://externalaction.com/search 。

按下按钮<input class="button default" name="BtnX" type="submit" value="Search">后，将输入作为GET发送到前台的 https://externalaction.com/search 。

我知道这很复杂，但我还没有找到适用于所有三种情况的解决方案而不会相互干扰，并且没有人在网上似乎有任何信息或问题，就像这种情况一样。

感谢任何有任何帮助，提示或解答/代码的人！

Answer 1

这看起来并不复杂，虽然我不确定你为什么要每5秒发送一次搜索查询而不是按键发送？无论如何，它应该只使用$.post()和setTimeout。

<form action="https://externalaction.com/search" method="get">
    <input id="field" name="q" maxlength="2048" autocomplete="off" title="Search" type="text" value="" spellcheck="false" autofocus>
    <input class="button default" name="BtnX" type="submit" value="Search">
</form>
<div id="results"></div>

<script>
$(function() {
    search();
});
function search() {
    $.post(
        "search-api.php",
        { field: $('#field').val() },
        function (data) {
            $('#results').html(data); // or whatever format you want data in
        }
    );

    setTimeout(search, 5000);
}
</script>

如果您对使用按键而不是每5秒钟感兴趣，对JS来说就是这样：

<script>
$(function() {
    $('#field').on('keyup change', 'search');
});
function search() {
    $.post(
        "search-api.php",
        { field: $('#field').val() },
        function (data) {
            $('#results').html(data); // or whatever format you want data in
        }
    );
}
</script>

虽然在这种情况下您不需要命名函数，但您可以将search()函数设为按键回调。

您还提到过要将AJAX响应设置为$url，但是看起来像就像PHP变量一样，所以如果它变为<＃em>，那么你就无法修改它。 ; s在包含表单的页面中，除非您重新加载它。如果你想以编程方式进行重定向，那么这很容易做到，但是会变得相当棘手并进入奇怪的循环。因此，最好知道页面中使用的$url是什么，然后使用JS将其替换为回调中的值，就像我替换结果的HTML {{ 1}}在我当前的例子中。

搜索表单字段将自动提交＆＃39;输入＆＃39;按键，只要它具有焦点（即在某人完成输入后点击并输入＆＃39;），但是如果您想按下输入时发送结果，无论哪个输入具有焦点this answer会有所帮助。

顺便说一下，通常你不想在没有某种终止条件的情况下以超时的方式递归搜索，这会在某些情况下导致内存问题。

Answer 2

首先，你应该搜索输入是一个表单并需要表单标记，即使它只是一个输入。我们可以考虑这样：

将set按钮类型设置为提交。 2和3选项可行。

<form id="search-form" action="https://externalaction.com/search" method="GET">
<input id="field" name="q" maxlength="2048" autocomplete="off" title="Search" type="text" value="" spellcheck="false" autofocus>
    <input class="button default" name="BtnX" type="submit" value="Search">
</form>

第二种情况，如果在某些情况下（非常罕见）某些浏览器无法正常使用type="submit"输入按钮，您应该像这样使用jQuery：

$(function() {
    $("#search-form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $('#search-form button[type=submit] .default').click();
            return false;
        } else {
            return true;
        }
    });
});

对于自动完成搜索，您可以使用许多存在的库或自己编写我建议阅读本文的示例：

http://ianlunn.co.uk/articles/ajax-search-suggest-wearehunted/

实际上，如果您使用标准表单元素，您唯一要查找的只是一个自动完成搜索输入，我相信用户通过每隔5秒输入一个单词来查看结果。但它取决于你。

根据您的上次评论编辑：

如果您只有一个搜索操作，则至少应使用两个不同的视图。

要使用自动完成功能，您应该使用ajax，如果您只想要一个操作或页面，只需发送一个额外的参数，并在Json中创建一个回显结果的部分视图，而不是包含页眉和页脚的完整视图...

Answer 3

函数searchData()处理AJAX请求。 setInterval(function(){searchData()}, 5000)部分每5秒处理一次请求搜索内容。如果点击Enter键，那么请求处理keydown事件，最后点击功能处理请求来通过搜索按钮。

的search.php

<!--- Search field and button -->
<input id="field" name="q" maxlength="2048" autocomplete="off" title="Search" type="text" value="" spellcheck="false" autofocus> 
<input type="button" name="search" id="search" value="Search"/>

<!--- Display result -->
<span id="res"></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
    // function used for AJAX call
    function searchData(){
        var txt = $("#field").val();
        $.get("searchData.php", {search: txt}, function(result){
            $("#res").html(result);
        });
    }   
    // search every 5 second
    setInterval(function(){searchData()}, 5000);
    // if press enter button search
    $('#field').on('keydown', function(e) {
        if (e.which == 13) {
            e.preventDefault();
            searchData();
        }
    }); 
    // if search button press
    $("#search").click(function(){
        searchData();
    });     
});     
</script>

searchData.php - 用于处理请求的页面

<?php
    // testing purpose
    echo $_GET['search'];
?>

多场景表单操作（背景，多个操作，计时器）

3 个答案: