在javascript函数中使用搜索框

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

这是我的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>

---

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

    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

    });

---

为什么不使用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>

函数搜索（）{
var d=document.getElementById（'display'）；
var a=document.getElementById（'txt'）.value；
如果（a）{
var x=新的XMLHttpRequest（）；
x、 onreadystatechange=函数（）{
如果（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（）；
}否则{
d、 style.display=“无”；
}
}
#展示{
边框：纯中黑色；
宽度：200px；
显示：无；
}
搜寻

您输入的表单是否实际正在提交并刷新页面？你怎么知道它会自动复位。如何调用dataservices函数？为什么不在函数中而不是在函数外部调用它呢？当页面刷新时，全局变量会自动重置。。是的，这通常是JS变量的情况。您不需要提交表单。从

按钮中删除
type=“submit”
，对不起，我现在包括了完整的表单。我在另一个javascript文件中这样调用dataservices:dataservices={}；在调试我的程序时，我看到在我运行DoSearch函数之后，我的程序执行了这个dataservices={}，我失去了搜索。对不起，我对javascript的了解很差。@Razziel，就像我在你文章中的第一句评论一样。即使您不提供操作，表单也会默认提交到它所在的页面。很好的解决方案，这比我的Onclick函数好得多。非常感谢^^很抱歉，您的解决方案很好，但您没有掌握所有信息，这是我的错，我对Javascript了解不多谢谢您的回答：）但是[type=“submit”]不是必需的，是吗？如果您添加另一个按钮的话。但在您当前的标记中，没有。
    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

    });

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>