JavaScript 表单到搜索引擎重定向

Question

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

有趣的是，如果您将提交输入设为按钮并执行 onClick="searchForm"然后单击它，它就会起作用。但是你不能输入，只需按 enter 键进行搜索……这对我来说是必要的。

此外，如果有任何更好但完全不同的方法来做到这一点，我很乐意听到。

谢谢。

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

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

再次编辑:好的，谢谢 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;

其他:

你的标记很奇怪
如果您想取消搜索，您需要将函数的输出返回到表单的 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>