JavaScript 表单到搜索引擎重定向

Question

我正在尝试制作一个表单，该表单将采用给定的文本并将您定向到选定的搜索引擎，并将文本作为查询。我在让 javascript (re)direct 时遇到问题。

有趣的是，如果您将提交输入设置为一个按钮并执行 onClick="searchForm" 然后单击它，它将起作用。但是你不能输入，只需按回车键即可搜索..这对我来说是必要的。

另外，如果有更好但完全不同的方法来做到这一点，我很想听听。

谢谢。

编辑：完全改变了代码以匹配 meouw 所说的，这比我原来的要清楚得多，所以谢谢。我知道 HTML 搞砸了，这主要是因为我改变了周围的一切以尝试让 JavaScript 工作。所以即使现在我清理了所有东西，它仍然有同样的问题。

我知道我缺少一些东西，因为如果你放一个 alert('cat');更改 JavaScript 中的 url 后，您可以看到浏览器已被重定向以进行搜索，但是一旦您单击警报上的 OK，您就会被收回。您甚至可以返回浏览器的历史记录以转到您的搜索页面。

再次编辑：好的，谢谢 meouw。返回 false 是我一直需要的。感谢您的帮助。

最终代码：

<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>

Answer 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>

Answer 2

您要提交表单以指定位置进行搜索，对吗？

替换这行代码：

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();">