Question

这是情况。我有一个包含选择框和搜索字段的表单。我需要在选择框中选择的选项来确定搜索字段的操作。我已经看过多个这样的帖子，但是在这里我认为我的帖子有些不同：我的表单操作是需要能够接受搜索字段输入的URL（并且每个网站的URL都很挑剔关于标记为搜索查询的内容）。例如，

用户从选择框中选择“ Digikey”，表单操作将更改为https://www.digikey.com/products/en?keywords=。搜索字段条目为C0603C0G1H180J030BA。我需要将此条目附加到URL查询的特定部分，以便使其与相应的URL对齐。如果我只是去www.digikey.com并将相同的搜索输入到他们站点的搜索中（我建议阅读此内容的人访问此网站，搜索我提供的条目并观察URL，以更好地了解我在说什么。

我尝试使用jQuery解决方案。

编辑，我收到的（用于Digikey的）URL是：

https://www.digikey.com/products/en?q=C0603C0G1H180J030BA

而不是必需的：

https://www.digikey.com/products/en?keyword=C0603C0G1H180J030BA

HTML

 <form class="form-inline" data-toggle="#octopart" action="http://octopart.com/search" style="padding-top: 10px;">
         <div class="input-group mb-3" style="width: 50%;">
             <div class="input-group-prepend">
                 <select class="custom-select" id="searchEngine">
                     <option value='octopart'>OctoPart</a></option>
                     <option value='digikey'>DigiKey</a></option>
                     <option value='mouser'>Mouser</a></option>
                     <option value='generalsearch'>General Search</a></option>
                 </select>
             </div>    
             <input class="form-control" type="search" name="q" placeholder="Search part ..." name="search" style="width: 200px">
             <div class="input-group-append">
                 <button class="btn btn-outline-success my-2 my-sm-0" data_target="#octopart" type="submit"><i class="fa fa-search"></i></button>
             </div>
        </div>
   </form>

jQuery

$('#searchEngine').change(function(){
        var selectedEngine = $(this).val();
        if (selectedEngine == "octopart") {
            $(this).closest("form").attr("action", "www.octopart.com/search");
            } else if (selectedEngine == "digikey") {
            $(this).closest("form").attr("action", "https://www.digikey.com/products/en?keywords=" + $(this).closest("form").val());
            } else if (selectedEngine == "mouser") {
            $(this).closest("form").attr("action", "www.mouser.com/ProductDetail/");
            } else {
            $(this).closest("form").attr("action", "www.google.com/search");
            }
});

Answer 1

如果您要提交self.input()为method的表单集，并更改查询参数中您想要的字段'GET'以匹配端点上的预期参数

仅digikey的工作示例

name

var resources = {
  digikey: {
    url: 'https://www.digikey.com/products/en',
    query: 'keywords'
  },
  // won't open in iframe in demo
  /* octopart:{
     url:'https://octopart.com/search',
     query:'q'
   }*/

};

var $sInput = $('#search-input');

$('form').submit(function() {
  var params = resources[$('#searchEngine').val()];
  this.action = params.url;
  $sInput.attr('name', params.query);
});

iframe {
  height: 800px;
  width: 100%
}

Answer 2

您在此处为输入指定了两个名称，这不是最佳做法

name =“ q”和name =“ search”

我从

更改

$(this).closest("form").val()

到

$(this).closest(":input[name=q]").val()


$(this).closest("form").submit(function() {
            var selectedEngine = $("#searchEngine").val();
            if (selectedEngine == "octopart") {
                $(this).closest("form").attr("action", "www.octopart.com/search");
                } else if (selectedEngine == "digikey") {
                $(this).closest("form").attr("action", "https://www.digikey.com/products/en?keywords=" + $(this).closest(":input[name=q]").val());
                } else if (selectedEngine == "mouser") {
                $(this).closest("form").attr("action", "www.mouser.com/ProductDetail/");
                } else {
                $(this).closest("form").attr("action", "www.google.com/search");
                }
    });

jQuery根据选择器值更改表单操作

2 个答案: