javascript - 如何制作一个搜索框？

Question

如何构建一个仅通过 Ajax 工作的搜索框表单？即:

1) 将什么作为表单的操作值？ ( Action =“什么”)

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; 
     }