2010-02-11 85 views
2

我正在嘗試製作一個表單,它將採用給定的文本並將您引導至選定的搜索引擎並將文本作爲查詢。我有問題讓JavaScript(重新)直接。JavaScript表單到搜索引擎重定向

有趣的是,如果你使提交輸入一個按鈕,並做onClick =「searchForm」,然後點擊它,它將工作。但是,那麼你不能鍵入,只需按回車搜索..這對我來說是必要的。另外,如果有更好的但完全不同的方式來做到這一點,我很樂意聽到它。

謝謝。

編輯:徹底改變了代碼,以匹配什麼meouw說,這比我最初有更清晰,所以謝謝。我知道HTML被搞砸了,這主要是因爲我正在改變一切,試圖讓JavaScript起作用。所以即使現在我已經清理了一切,它仍然有同樣的問題。

我知道我缺少的東西,因爲如果你把警報('貓');在更改JavaScript中的URL後,您可以看到瀏覽器已被重定向到執行搜索,但是一旦您在警報上單擊確定,就會收回。你甚至可以回到瀏覽器的歷史記錄去搜索頁面。

編輯再次:好的,謝謝你。返回虛假是我一直需要的。謝謝您的幫助。

最終代碼:

<script type="text/javascript"> 
    function doSearch(f) { 
     var searchTerm = f.searchText.value; 

     if(!searchTerm) { 
      //tell user to enter a search string 
      // cancel the request by returning false 
      return false; 
     } 

     var sel = f.whichEngine; 
     var selectedEngine = sel[sel.selectedIndex].value; 
     var engineUrl; 

     switch(selectedEngine) { 
     case 'google_web': 
      engineUrl = 'http://www.google.com/search?q='; 
      break; 
     case 'bing_web': 
      engineUrl = 'http://www.bing.com/search?q='; 
      break; 
     case 'yahoo_web': 
      engineUrl = 'http://search.yahoo.com/search?p='; 
      break; 
     case 'google_images': 
      engineUrl = 'http://www.images.google.com/images?q='; 
      break; 
     case 'bing_images': 
      engineUrl = 'http://www.bing.com/images/search?q='; 
      break; 
     case 'yahoo_images': 
      engineUrl = 'http://images.search.yahoo.com/search/images?p='; 
      break; 
     } 

     engineUrl += searchTerm; 
     window.location.assign(engineUrl); 
     return false; 
    } 

</script> 
<form onsubmit="return doSearch(this)"> 
    <fieldset> 
     <legend>Search</legend> 
     <ul> 
      <li> 
       <input type="text" name="searchText" id="searchText" size="41" maxlength="2048" /> 
      </li> 
      <li> 
       <select name="whichEngine" id="whichEngine"> 
        <optgroup label="Web"> 
         <option id="GoogleWeb" value="google_web" checked="checked">Google Web</option> 
         <option id="BingWeb" value="bing_web">Bing Web</option> 
         <option id="YahooWeb" value="yahoo_web">Yahoo! Web</option> 
        </optgroup> 
        <optgroup label="Images"> 
         <option id="GoogleImages" value="google_images">Google Images</option> 
         <option id="BingImages" value="bing_images">Bing Images</option> 
         <option id="YahooImages" value="yahoo_images">Yahoo! Images</option> 
        </optgroup> 
       </select> 
       <input type="submit" value="Search"> 
      </li> 
     </ul> 
    </fieldset> 
</form> 
+0

你或許應該通過運行一個驗證啓動在您的標記中 - ''元素除了選項外不能包含任何內容;標籤和元素是禁止的。 – Quentin 2010-02-11 06:58:19

+0

在doSearch()的末尾返回false以便表單從不提交 – meouw 2010-02-11 08:39:12

+0

我修改了我的答案,對不起 – meouw 2010-02-11 08:42:39

回答

1

你的主要問題是這樣的

window.location.assign(finalSearchString); 

應該

了window.location = finalSearchString;

window.location.href = finalSearchString; 

其他的事情:

您的標記是奇數
你需要你的函數的輸出return到窗體的情況下,你要取消搜索的onsubmit。
您不需要選項中的標籤和鏈接,而不必使用自閉選項標籤將選項中的文本放入選項中,併爲該選項提供可由腳本讀取的值。這是安全,如果你來加入更多的選項後

<form onsubmit="return doSearch(this)"> 
.... 
<optgroup label="Google"> 
    <option value="google_search">Google Web</option> 
    <option value="google_images">Google Images</option> 
</optgroup> 
.... 
</form> 

<script type="text/javascript"> 

function doSearch(f) { 
    var searchTerm = f.searchText.value; 

    if(!searchTerm) { 
     //tell user to enter a search string 
     // cancel the request by returning false 
     return false; 
    } 

    var sel = f.whichEngine; 
    var selectedEngine = sel[sel.selectedIndex].value; 
    var engineUrl; 

    switch(selectedEngine) { 
     case 'google_search': 
      engineUrl = 'http://www.google.com/search?q='; 
      break; 
    .... 
    } 

    engineUrl += searchTerm; 
    window.location.href = engineUrl; 

} 

</script> 
+0

我仍然認爲window.location.assign(engineUrl);比window.location.href要好,因爲人們說使用後退按鈕可能會導致重定向錯誤,或者是window.location.replace(),因爲它會覆蓋您調用它的位置的歷史記錄。儘管如此,很難說,因爲互聯網上沒有太多關於window.location.assign()的信息。 – SirDinosaur 2010-02-11 09:06:47

+0

我從來沒有使用過assign()tbh - 即使在http://www.w3.org/TR/Window/#location-methods的W3C文檔中也留下了空白分配描述 - 有些人已經發現它相對於js文件的src。使用它,如果它在你的情況下工作tho :) – meouw 2010-02-11 09:44:34

0

你想提交表單與指定位置搜索,對不對?

替換這行代碼的:

function startSearch(){ 
    // ................... 
    // ................... 
    // ................... 

    window.location.assign(finalSearchString); 
} 

有了:

function startSearch(){ 
    // ................... 
    // ................... 
    // ................... 

    if (finalSearchString) 
    { 
    document.searchForm.action = finalSearchString; 
    document.serachForm.submit(); 
    return true; 
    } 
    else 
    { 
    return false; 
    } 

最後你form標籤改成這樣:

<form name="searchForm" onSubmit="return startSearch();"> 
+0

如果你直接提交到引擎,你還需要確保你的搜索框的名稱匹配引擎的期望 - 即'q' - 這可能不是所有情況引擎例如http://www.wolframalpha.com/使用'我',雅虎使用'p' – meouw 2010-02-11 07:08:04

+0

@meouw:什麼?這是在變量finalSearchString – Sarfraz 2010-02-11 07:12:05

+0

內部的函數中編寫的。因此,您最終提交了www.google.com/search?q=cat?seachText=cat&whatEver=blah - 您是否看到問題?網址是borked – meouw 2010-02-11 07:15:46