Question

如何组成一个将成为搜索框并仅通过Ajax工作的表单？那就是：

1）作为表单的动作值放什么？（动作= “什么”）

2）如何提交它以便除了调用JavaScript函数之外没有其他事情发生？

Answer 1

您可以执行以下操作：

<input id="search" /> <input type="button" onclick="doSearch()" />
<div id="results"></div>

dosearch将类似于

function doSearch()
    {
    var s = document.getElementById("search");
    // Substitute this line with whatever code you use to do an AJAX call
    // Essentially call a serverside page by passing the search keyword and
    // call onReturn afterwards 
    doAJAXCall("searchpage.php?q="+s.value, onReturn);
    }

searchpage.php将根据需要搜索数据库，然后返回例如JSON字符串（例如，通过将结果存储在数组中并使用json_encode）或XML甚至直接HTML

最后，onReturn函数将遍历结果并将其打印在例如列表中，如下所示：

 function onReturn(results)
     {
     // decode your results variable here in the appropriate way
     // e.g. into a JSON object 
     var d = document.getElementById("results");

     var res = "<ul>";

     for (var i=0; i<results.lenght; i++)
         res = res + "<li>"+i.text+"</li>";

     res = res + "</li>";
     d.innerHTML = res; 
     }

Answer 2

使用像jQuery这样的框架。它具有挂钩表单并将其转换为AJAX的功能。查看jQuery Forms plugin。

Answer 3

形式与此无关。 form只是其他表单元素的容器。你可以随心所欲地采取任何行动（GET / POST，无论如何），无所谓。
将事件处理程序附加到文本框的搜索按钮click或keydown事件，并检查Enter键并使用xmlhttp对象将文本框的值路由到AJAX调用。我相信你可以在网上的某个地方找到关于如何使用xmlHttpRequest对象进行Ajax的详细信息：）...或者......好吧，你可以使用jQuery，哈哈。

Answer 4

我认为这样做很有效：

<form method="post" onsubmit="theFunction(this); return false;">
    <input type="text" value="" class="address_bar" />
</form>

如何组成搜索框？

4 个答案: