在javascript函数中使用搜索框

Question

我正在尝试在搜索框中输入并将该值用作另一个函数的参数，但是每次我单击按钮时，当页面刷新时，全局变量都会自行重置。

这是我的javascript代码中的内容：

var searchTags;
function DoSearch()
{
    searchTags = $('#squery').val();
}
dataservices.pictureFeedService.searchForPictures(searchTags, function (data) {
    dataservices.picturesLayoutService.buildPicturesLayout("images", data);
});

接下来是索引中搜索框的 html 代码：

<form id="custom-search-form" class="form-search form-horizontal">
      <div class="input-append span2 offset5">
           <input id="squery" type="text" class="search-query" placeholder="Search"/>
           <button type="submit" onclick="DoSearch();" class="btn"><i class="icon-search"></i></button>
      </div>
</form>

我的程序中有 3 个 JS 文件：main.js 中的 js 代码，另一个我使用 dataservices.pictureFeedService 和 dataservices.picturesLayoutService 的 js 文件，最后一个 js 文件，我只有这个：

dataservices = {};

Answer 1

要阻止页面刷新，您需要阻止表单提交。

    var form;
    // get your form's id
    form = $('#yourformid');
    form.submit(function(event) {
      // stop form from submitting
      event.preventDefault();
      var value;
      // get search term
      value = $('#squery').val();
      // add your code here to do whatever with your input's value
    });

Answer 2

$('#custom-search-form button[type="submit"]').click(function(e){
    e.preventDefault();
    dataservices.pictureFeedService.searchForPictures($('#squery').val(), function (data) {
        dataservices.picturesLayoutService.buildPicturesLayout("images", data);
    });
}

Answer 3

为什么不使用 JavaScript 的 OnKeyUp 事件。 您可以逐个字符读取文本框的值，然后使用 AJAX 在数据库中搜索相关结果。

function search(){
        var d =document.getElementById('display');
        var a = document.getElementById('txt').value;
        if(a){
        var x = new XMLHttpRequest();
        x.onreadystatechange = function(){
            if(x.readyState==4&& x.status==200){
                document.getElementById('display').innerHTML = x.responseText;
                d.style.display = "block";
            }
        }
        x.open('GET','ajax.php?search='+a,true);
        x.send();
        }else{
            d.style.display = "none";
        }
    }
 </script>
 <style>
    #display{
        border: solid medium black;
        width: 200px;
        display:none;
    }
</style>

<input type="text" id = 'txt' name="keyevent" onkeyup="search();" value="search"    required>Search
<div id="display"></div>