Javascript 将输入文本传递到URL以在页面上呈现新的iframe

我希望将输入框中的文本传递到URL的中间，该URL将根据用户“搜索”的内容呈现嵌入式iframe。单词之间的空格必须自动转换为“%20”或“+”

请参见此处，了解我想要实现的目标的示例：

在下面的框中输入关键字或短语，以查看其趋势。

var超时；
var input=document.querySelector（'input'）；
var iframe=document.querySelector（'iframe'）；
input.addEventListener（'input'，函数（e）{
如果（超时！==未定义）
clearTimeout（超时）；
timeout=setTimeout（函数（）{
iframe.src=http://www.google.com/trends/fetchComponent?hl=en-US&q='+input.value+'&cid=TIMESERIES_图0&export=5&w=500&h=300'；
}, 1000);
});
iframe{
宽度：100%；
高度：400px；
}
输入{
利润率：40px0；
}

您的实际问题是什么？到目前为止你试过什么？你说的是你想要的，我看不到这是我的问题，这是造成问题的原因。有关如何提问的说明，请参见。FWIW，在这个示例中，没有jQuery，没有什么事情是不容易做到的。是的，我意识到了这一点。我从一开始就想到了jQuery。我会让它成为香草JS。你有没有办法把它写出来，展示一下这个按钮是如何工作的？“我想你是对的，从用户体验的角度来看，这会更好。”MichaelMacfadden，我添加了一个带有按钮的示例。但我真的建议你阅读一些javascript。
Enter a keyword or phrase into the box below to see if it's trending.
<br>
<input placeholder="***input***"></input>

<iframe src="http://www.google.com/trends/fetchComponent?hl=en-US&q=***INPUT***&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=300"></iframe>