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

Question

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

在这里看到的想什么，我实现一个例子：

http://jsfiddle.net/pw3fL453/

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> 

Answer 1

var timeout; 
 
var input = document.querySelector('input'); 
 
var iframe = document.querySelector('iframe'); 
 

 
input.addEventListener('input', function(e){ 
 
    if(timeout !== undefined) 
 
     clearTimeout(timeout); 
 
    
 
    timeout = setTimeout(function(){ 
 
     iframe.src = 'http://www.google.com/trends/fetchComponent?hl=en-US&q='+ input.value +'&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=300'; 
 
     }, 1000); 
 
});

iframe{ 
 
    width:100%; 
 
    height:400px; 
 
} 
 

 
input{ 
 
    margin:40px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

它可能会更好，只是有一个按钮，虽然，每次您在输入框上进行更改时，输入事件都会触发。

var input = document.querySelector('input'); 
 
var iframe = document.querySelector('iframe'); 
 
var button = document.querySelector('button'); 
 

 
button.addEventListener('click', function(e){ 
 
     iframe.src = 'http://www.google.com/trends/fetchComponent?hl=en-US&q='+ input.value +'&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=300'; 
 
});

iframe{ 
 
    width:100%; 
 
    height:400px; 
 
} 
 

 
input{ 
 
    margin:40px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input placeholder="***input***"></input><button>go</button> 
 

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