Javascript在没有提交按钮的情况下获取输入并执行搜索功能答案

【问题标题】：Javascript get input and perform search function without sumbit buttonJavascript在没有提交按钮的情况下获取输入并执行搜索功能
【发布时间】：2015-10-09 23:37:03
【问题描述】：

我正在尝试从文本框中获取输入并使用该值在没有提交按钮的情况下执行搜索。因此，当文本框中的输入发生更改时，页面将显示相应的搜索研究结果。经过一些在线搜索，下面是我目前所拥有的。它不起作用。当我在文本框中输入时没有任何反应。有人可以帮忙吗？非常感谢！我也在代码中发表了评论。

<form name="form" method="post"/>   
         <input type="text" id="search" />  //when content in this text box changes, perform goSearch() and display result          
         <script type="text/javascript">                    
            var input = document.getElementById("search");
            function goSearch(){
                    var keyword = input.value; //get the input from textbox
                    //send keyword to search
                    var searchuri= somebaseuri +keyword; //send keyword with uri
                        var xhr = new XMLHttpRequest();
                        xhr.open("GET", searchuri,true);
                        xhr.setRequestHeader("Accept", "application/json");
                        xhr.onload= function(){
                            var list = JSON.parse(xhr.responseText);
                            showResult(list);
                        }   
                        xhr.send(null);                         
                } 
                function showResult(list){
                     //format and display the result we get from the server
                    }

            input.onchange = goSearch(); //when input is changed, perform search function
            input.onblur =goSearch();
        }   
    </script>
</form>

【问题讨论】：

input.onchange = goSearch(); 分配执行函数的结果，您要为函数分配引用：input.onchange = goSearch;。
我试过了，但没用..
定义“无效”。将事件监听器作为属性附加在浏览器中已经使用了近 20 年，奇怪的是它现在应该停止了。
@RobG 感谢队友指出。我想你是对的。我会调查此事。我认为我在其他地方的代码有问题。
@RobG 谢谢！我试过你的建议，它奏效了。然而奇怪的是，它直到我单击调试器控制台才起作用。我的意思是当我在文本框中输入内容时，页面不会更新，直到我单击页面上的其他位置。你知道它为什么会这样吗？

标签： javascript html forms textbox uri

【解决方案1】：

您需要将事件侦听器附加到输入。

document.getElementById("search").addEventListener("yourEvent", function() {
    // Your code to execute.
});

或者，

document.getElementById("search").addEventListener("yourEvent", myFunctionHere);

编辑 1

为了安全起见，完成上述操作后，请确保检查控制台是否有任何错误，因为请求也可能失败。

编辑 2

yourEvent 应包含您希望它查找的事件，例如在您的情况下为 blur 事件。使用此方法分配事件时，您不需要 on 前缀。

阅读材料

http://www.w3schools.com/jsref/met_document_addeventlistener.asp

【讨论】：

谢谢！您能否详细解释一下“yourEvent”应该包含哪些内容？
谢谢！我可以问你一个不太相关的问题吗？在方法主体（//您要执行的代码部分）中，我可以调用在 html 文档中其他地方定义的 javascript 函数吗？我试图这样做，但它不能正常工作。提前致谢。我对此很陌生。
使用第二种方法，其中myFunctionHere是函数名，不要放括号。
谢谢！我想我的问题是，在myFunctionHere 中，我仍然可以调用另一个在 html 文档中其他地方定义的函数，对吗？
@user3735871 为什么不试试看呢？这是一个学习的过程。 ;)