如何将搜索文本区域中的搜索关键字转换为前向链接？答案

【问题标题】：How to convert Search Keywords in search texarea into a forward link?如何将搜索文本区域中的搜索关键字转换为前向链接？
【发布时间】：2016-10-05 11:29:31
【问题描述】：

我有一个计划像这样运行的小脚本：当有人搜索产品并点击白色箭头时，它会将他以关键字作为ebay产品搜索结果转发到ebay。

我希望当有人搜索让我们说：samsung Galaxy s5 时，脚本会生成关键字并将其转发到正确的地址。并且不好解释：

例如：

我正在搜索 samsung galaxy s5，所以完整链接地址是：

http://rover.ebay.com/rover/1/711-53200-19255-0/1?icep_ff3=9&pub=5575165347&toolid=10001&campid=5337851510&customid=&icep_uq=samsung+galaxy+s5&icep_sellerId=&icep_ex_kw=&icep_sortBy=12&icep_catId=&icep_minPrice=&icep_maxPrice=&ipn=psmain&icep_vectorid=229466&kwid=902099&mtid=824&kw=lg

因此，它应该转发给我这样的地址：

http://www.ebay.com/sch/items/?_nkw=samsung+galaxy+s5&_sacat=&_ex_kw=&_mPrRngCbx=1&_udlo=&_udhi=&_sop=12&_fpos=&_fspt=1&_sadis=&LH_CAds=&rmvSB=true

但是，使用我当前的脚本，我得到的只是（下面的）地址：

http://www.ebay.com/?q=samsung+galaxy+s5&rmvSB=true

我尝试把 % 放在之后：

http://rover.ebay.com/rover/1/711-53200-19255-0/1?icep_ff3=9&pub=5575165347&toolid=10001&campid=5337851510&customid=&icep_uq=

和之前：

&icep_sellerId=&icep_ex_kw=&icep_sortBy=12&icep_catId=&icep_minPrice=&icep_maxPrice=&ipn=psmain&icep_vectorid=229466&kwid=902099&mtid=824&kw=lg

但我得到与以下相同的地址结果：

http://www.ebay.com/?q=samsung+galaxy+s5&rmvSB=true

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Search Box Example 2 - default placeholder text gets cleared on click</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- Add jQuery to your website if you don't have it already -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- JAVASCRIPT to clear search text when the field is clicked -->
<script type="text/javascript">
$(function() {
    $("#tfq2b").click(function() {
        if ($("#tfq2b").val() == "Search our website"){
            $("#tfq2b").val(""); 
        }
    });
});
</script>
<!-- CSS styles for standard search box with placeholder text-->
<style type="text/css">
    #tfheader{
        background-color:#c3dfef;
    }
    #tfnewsearch{
        float:right;
        padding:20px;
    }
    .tftextinput2{
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        color:#666;
        border:1px solid #0076a3; border-right:0px;
        border-top-left-radius: 5px 5px;
        border-bottom-left-radius: 5px 5px;
    }
    .tfbutton2 {
        margin: 0;
        padding: 5px 7px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        border: solid 1px #0076a3; border-right:0px;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
        background: -moz-linear-gradient(top,  #00adee,  #0078a5);
        border-top-right-radius: 5px 5px;
        border-bottom-right-radius: 5px 5px;
    }
    .tfbutton2:hover {
        text-decoration: none;
        background: #007ead;
        background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
        background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    }
    /* Fixes submit button height problem in Firefox */
    .tfbutton2::-moz-focus-inner {
      border: 0;
    }
    .tfclear{
        clear:both;
    }
</style>
</head>
<body>
    <!-- HTML for SEARCH BAR -->
    <div id="tfheader">
        <form id="tfnewsearch" method="get" action="http://rover.ebay.com/rover/1/711-53200-19255-0/1?icep_ff3=9&pub=5575165347&toolid=10001&campid=5337851510&customid=&icep_uq=&icep_sellerId=&icep_ex_kw=&icep_sortBy=12&icep_catId=&icep_minPrice=&icep_maxPrice=&ipn=psmain&icep_vectorid=229466&kwid=902099&mtid=824&kw=lg">
                <input type="text" id="tfq2b" class="tftextinput2" name="q" size="21" maxlength="120" value="Search our website"><input type="submit" value="&gt;" class="tfbutton2">
        </form>
        <div class="tfclear"></div>
    </div>
</body>
</html>

这是一个现场直播：JSfiddle

【问题讨论】：

标签： jquery html forms search textarea

【解决方案1】：

您必须将所有其他查询参数添加为隐藏输入，例如：

<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
       <form id="tfnewsearch" method="get" action="http://rover.ebay.com/rover/1/711-53200-19255-0/1">
            <input type="text" id="tfq2b" class="tftextinput2" name="_nkw" size="21" maxlength="120" value="Search our website">
              <input type='hidden' name='icep_ff3' value='9'>
              <input type='hidden' name='pub' value='5575165347'>
              <input type='hidden' name='toolid' value='10001'>
              <input type='hidden' name='campid' value='5337851510'>
              <input type='hidden' name='icep_sortBy' value='12'>
              <input type='hidden' name='icep_vectorid' value='229466'>
              <input type='hidden' name='kwid' value='902099'>
              <input type='hidden' name='mtid' value='824'>
              <input type='hidden' name='kw' value='lg'>
            <input type="submit" value="&gt;" class="tfbutton2">

       </form>
       <div class="tfclear"></div>
   </div>
</body>

等等

这将构建您正在寻找的 URL。

另一种选择是使用 javascript 重定向用户并自己解析他的查询，例如：

var q = document.getElementById('tfq2b').value;
var formatQ = q.replace(/\s/g,'+');
window.location.href = 'http://rover.ebay.com/rover/1/711-53200-19255-0/1?icep_ff3=9&pub=5575165347&toolid=10001&campid=5337851510&customid=&icep_uq=&icep_sellerId=&icep_ex_kw=&icep_sortBy=12&icep_catId=&icep_minPrice=&icep_maxPrice=&ipn=psmain&icep_vectorid=229466&kwid=902099&mtid=824&kw=lg&q=' + formatQ;

我发现它不如第一个选项那么“干净”

编辑

我刚刚看到您还需要将 textarea 的 name 更改为 icep_uq 以获取您发布的链接

【讨论】：

你能给我完整的解决方案吗？
我已经更新了我的答案，以尝试为您提供更多帮助-但您必须自己弄清楚其余部分，这不是编码服务-如果您想雇用我为你做这项工作，你需要付钱给我;-)
您的解决方案有效，我想将其标记为答案，但为什么我在地址链接中得到了“samsung+galaxy+s5”的名称？
抱歉，必须处理一些事情 - 你能更新小提琴以便我看到这个问题吗？
试过了，表单将我发送到：rover.ebay.com/rover/1/711-53200-19255-0/…，然后转换为ebay.com/sch/items/… 我没有看到多个Samsung+galaxy+s5 - 你呢？