如何组成搜索框?

时间:2010-06-01 10:54:29

标签: javascript html

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

1)作为表单的动作值放什么? (动作= “什么”)

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

4 个答案:

答案 0 :(得分: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; 
     }

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

我认为这样做很有效:

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