1. 首頁
  2. 問答
  3. 如何創建一個搜索框，可以在多個選項卡中打開來自不同搜索引擎的多個搜索結果？

如何創建一個搜索框，可以在多個選項卡中打開來自不同搜索引擎的多個搜索結果？

2011-04-22 33 views

回答

1

您描述的方式不需要使用Ajax。

Ajax用於從Web加載數據並更新用戶所在頁面的各個部分，使用Ajax可以更新頁面而不移動到新頁面。

由於您要求打開新選項卡，Ajax與它無關。

<html> 
<head> 
<script type="text/javascript"> 
function performSearch() { 
    var searchTerm = encodeURIComponent(document.getElementById('searchField').value); 
    window.open('http://www.google.com/search?q=' + searchTerm, 'new_window_1'); 
    window.open('http://search.yahoo.com/search?p=' + searchTerm, 'new_window_2'); 
    // open more tabs here ... 
} 
</script> 
</head> 

<body> 
<input id="searchField" type="text" /> 
<input type="button" value="click me" onclick="performSearch();" /> 
</body> 
</html>

你能告訴我如何讓搜索欄之後按Enter執行搜索？

的快捷方式：

如果我們讓我們的文本字段中的實際HTML表單的一部分，使我們的JavaScript函數運行，當用戶提交表單 - 這將導致功能運行時，用戶點擊在文本框內輸入，因爲單擊屬於表單一部分的文本框中的輸入提交表單。

<html> 
<head> 
<script type="text/javascript"> 
function performSearch() { 
    var searchTerm = encodeURIComponent(document.getElementById('searchField').value); 
    window.open('http://www.google.com/search?q=' + searchTerm, 'new_window_1'); 
    window.open('http://search.yahoo.com/search?p=' + searchTerm, 'new_window_2'); 
    // open more tabs here ... 
} 
</script> 
</head> 

<body> 
<form onsubmit="performSearch(); return false;"> 
<input id="searchField" type="text" /> 
<input type="submit" value="click me" /> 
</form> 
</body> 
</html>

現在的按鈕輸入的類型是「提交」，那麼當用戶點擊該按鈕的形式應該得到提交，我們有窗體上的事件處理程序 - 在「的onsubmit」 - 這個運行時用戶點擊按鈕或在搜索欄內按下輸入。我們添加'return false;'所以在我們的函數運行後沒有任何實際發生 - 表單實際上沒有被提交（因爲當你提交表單時，你通常在某處發送信息，我們在這裏不這樣做，它就像一個僞表單）。

來源

2011-04-22 07:17:28 bloodcell

+0

嘿謝謝。這正是我想要的。 （= – INeedCodes 2011-04-22 10:59:05

+0

你能告訴我如何讓搜索字段在按回車後執行搜索嗎？ – INeedCodes 2011-04-23 12:50:17

0

您需要使用ajax，並使用GET方法抓取發送查詢字符串的內容，並在Div或任何您想要的內容中顯示它！

當我搜索AJAX Micro Mini Lib谷歌重定向我 http://www.google.co.in/search?q=ajax+micro+mini&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a 現在省略所有那些你不希望出現這種情況是 http://www.google.co.in/search?q=encodeURIComponent(searchString）東西

現在使用AJAX微Mini或jQuery的或什麼都得到的內容頁面，您可以使用AJAX Micro Mini [如果您知道PHP或ASP或JSP ...]，因爲它帶有一些簡單示例

來源

2011-04-22 06:47:02 Sourav

+0

Sourav，你能告訴我怎麼做？謝謝。 – INeedCodes 2011-04-22 07:02:52

相關問題

 相關問題