单击“搜索”按钮将用户发送到新的选项卡，显示了另一个站点的结果？

发布于 2025-02-13 09:54:14 字数 748 浏览 0 评论 0 原文

我正在尝试在我的网站上创建一个搜索框。但是，当某人单击“搜索”或按“ Enter/return”时。我想要一个单独的选项卡以显示来自其他站点的搜索结果。

示例：

# using another answer on stackoverflow
# I have tried a lot of different action urls.
# the website url to which I want to send the search: 
<form method="get" action="website.com/?searchTerm">
    <input type="text" name="searchTerm"/>
  </form>

当我尝试使用上面的Enter并按ENTER进行演示时，我只需访问网站IE weblity.com/?searchterm 而不是结果页面。

我认为可能使用的另一种方法是，当 Enter> enter 或按钮单击<<时，在网站的URL中替换 searchTerm 。代码> www.example.com 使用 a 标签。

原文

I am trying to create a search box on my site. However when someone clicks "search" or presses "enter/return". I want a separate tab to open with the search results from a different site to be displayed.

Example:

My site: www.example.com

# using another answer on stackoverflow
# I have tried a lot of different action urls.
# the website url to which I want to send the search: 
<form method="get" action="website.com/?searchTerm">
    <input type="text" name="searchTerm"/>
  </form>

When I try to demo it using the above and press enter, I simply go to the website i.e. website.com/?searchTerm not the results page.

Another approach I thought might work is to replace the searchTerm in the url of the results page of the website when Enter or button is clicked on www.example.com using a tags.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

总以为 2025-02-20 09:54:14

您可以使用 target属性在表单标签上。

不要忘记通知您的用户，包括屏幕阅读器用户，该操作将打开一个新选项卡。

如果使用GET方法，则输入名称和值将作为查询参数传递。因此，＆lt; input name =“搜索term” value =“ test”＆gt; 将变成？搜索term = test 在请求的URL中。

get ：get方法;表格数据附加到操作URL上？分离器。当形式没有副作用时，请使用此方法。

<form method="get" target="_blank" action="https://example.com/SearchDisplay">
  <label>Search Term
      <input type="search" name="searchTerm">
      </label>
  <button type="submit">Search (opens in new tab)</button>
</form>

以上代码在交互式堆栈片段中无法使用，因为它将在iFrame内部。

如果您在目标网站

上检查搜索表格，您会发现他们使用 searchDisplay 作为操作。此外，它们还包括一堆以其形式的隐藏字段。您还需要弄清楚您的表格中还包含哪些，以使您的查询不会被阻止。

不过，请当心这是目标商店的实现详细信息，而不是稳定搜索像OpenSearch这样的API 。因此，它可能随时改变，您的搜索表将不再起作用。

目标网站上的表单代码：

<form accept-charset="UTF-8" name="CatalogSearchForm" action="SearchDisplay" method="get" id="searchForm" class="searchForm">
            <div class="search-input-wrapper" role="group" aria-label="...">
                <div class="search-input-field">
                    
                    <input type="hidden" name="storeId" value="5451206" id="WC_CachedHeaderDisplay_FormInput_storeId_In_CatalogSearchForm_1">
                    <input type="hidden" name="catalogId" value="10002" id="WC_CachedHeaderDisplay_FormInput_catalogId_In_CatalogSearchForm_1">
                    <input type="hidden" name="langId" value="-3" id="WC_CachedHeaderDisplay_FormInput_langId_In_CatalogSearchForm_1">
                    <input type="hidden" name="pageSize" value="10" id="WC_CachedHeaderDisplay_FormInput_pageSize_In_CatalogSearchForm_1">
                    <input type="hidden" name="beginIndex" value="0" id="WC_CachedHeaderDisplay_FormInput_beginIndex_In_CatalogSearchForm_1">
                    <input type="hidden" name="sType" value="SimpleSearch" id="WC_CachedHeaderDisplay_FormInput_sType_In_CatalogSearchForm_1">
…

You can use the target attribute on the form tag.

Don’t forget to inform your users, including screen reader users, that the action will open a new tab.

If you use the GET method, input names and values are going to be passed as query parameters. So <input name="searchTerm" value="test"> will become ?searchTerm=test in the requested URL.

get: The GET method; form data appended to the action URL with a ? separator. Use this method when the form has no side-effects.

<form method="get" target="_blank" action="https://example.com/SearchDisplay">
  <label>Search Term
      <input type="search" name="searchTerm">
      </label>
  <button type="submit">Search (opens in new tab)</button>
</form>

The above code would not work in an interactive stack snippet, because it would be inside an iframe.

For your search to actually work with the target site

If you inspect the search form on your target website, you’ll notice they use SearchDisplay as the action. Additionally, they include a bunch of hidden fields in their form. You will need to figure out which ones to include in your form as well, for your query to not get blocked.

Beware, though, that this are implementation details of the target shop, not a stable search API like OpenSearch. So it might change at any time, and your search form will no longer work.

The form code from the target website:

<form accept-charset="UTF-8" name="CatalogSearchForm" action="SearchDisplay" method="get" id="searchForm" class="searchForm">
            <div class="search-input-wrapper" role="group" aria-label="...">
                <div class="search-input-field">
                    
                    <input type="hidden" name="storeId" value="5451206" id="WC_CachedHeaderDisplay_FormInput_storeId_In_CatalogSearchForm_1">
                    <input type="hidden" name="catalogId" value="10002" id="WC_CachedHeaderDisplay_FormInput_catalogId_In_CatalogSearchForm_1">
                    <input type="hidden" name="langId" value="-3" id="WC_CachedHeaderDisplay_FormInput_langId_In_CatalogSearchForm_1">
                    <input type="hidden" name="pageSize" value="10" id="WC_CachedHeaderDisplay_FormInput_pageSize_In_CatalogSearchForm_1">
                    <input type="hidden" name="beginIndex" value="0" id="WC_CachedHeaderDisplay_FormInput_beginIndex_In_CatalogSearchForm_1">
                    <input type="hidden" name="sType" value="SimpleSearch" id="WC_CachedHeaderDisplay_FormInput_sType_In_CatalogSearchForm_1">
…

回复收藏 0 原文

~没有更多了~