Question

我希望将输入到输入框中的文字传递到网址的中间，该网址会根据用户搜索的内容呈现嵌入式iframe。＆＃34;单词之间的空格必须自动转换为＆＃34;％20＆＃34;或＆＃34; +＆＃34;。

请参阅此处，了解我希望实现的目标：

SELECT Name,
    TotalValue = SUM(Value)
FROM @t_Table
GROUP BY Name
HAVING SUM(
  CASE [Type]
   WHEN 'Yellow' THEN 1.0
   WHEN 'Blue'   THEN 1000.0
   WHEN 'Green'  THEN 1000000.0
   WHEN 'Orange' THEN 0
   ELSE 0
  END) = 1 * 1000000.0 + 1 * 1000.0 + 1.0  -- For clearance use calculated version

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>

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

1 个答案: