將輸入文本傳遞到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>