在javascript函数中使用搜索框答案

【问题标题】：Use search box in javascript function在javascript函数中使用搜索框
【发布时间】：2013-12-23 18:34:52
【问题描述】：

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

这是我的 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 = {};

【问题讨论】：

您的输入是否在实际提交并刷新页面的表单中？你怎么知道它会自行重置。您的数据服务功能是如何被调用的？为什么不在函数中而不是在外部调用它。
当页面刷新时，全局变量会自行重置。。是的，这通常发生在 JS 变量上。
您不需要提交表单。从button中删除type="submit"
对不起，我现在包含了完整的表格。我在另一个 javascript 文件中这样调用数据服务：dataservices = {};调试我的程序，我看到运行 DoSearch 函数后，我的程序执行了这个 dataservices = {} 并且我丢失了搜索。抱歉，我对 javascript 的了解很差。

标签： javascript jquery html search global-variables

【解决方案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

    });

【讨论】：

@Razziel，喜欢我对您帖子的第一条评论。即使您不提供操作，表单也会默认提交到它所在的页面。
很好的解决方案，这比我的 Onclick 功能好得多。非常感谢^^

【解决方案2】：

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

【讨论】：

对不起，你的解决方案很好，但你没有所有的信息，这是我的错，我对javascript不太了解
感谢您的回答 :) 但 [type="submit"] 的事情不是必需的，是吗？
如果您添加另一个按钮。但是在您当前的标记号中。

【解决方案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>

【讨论】：