Question

您好我在我的页面中使用了带有按钮下拉菜单的搜索框。在下拉中我给了两个选项（供应商和买方）＆amp;写了一些代码来选择选项。问题是输入搜索关键字后，如果我按下回车键，它会在URL中添加一些文字（https://html.lorem.com/?search-param=suppliers&x=paper）这里搜索关键字是纸。提前谢谢。

＆＃13;

// select item for input from searchdropdown menu desktop and other large devices
selectSearchBoxItem('#search-concept-desktop', '#search-param-desktop');
// select item for input from searchdropdown menu for small screen devices;
selectSearchBoxItem('#search-concept-small', '#search-param-small');

//Search box item selection
function selectSearchBoxItem(search_concept_id, search_param_id) {
  $('.search-panel-wrap .dropdown-menu').find('a').click(function(evt) {
    evt.preventDefault();
    var param = $(this).attr("href").replace("#", "");
    var concept = $(this).text();
    $('.search-panel-wrap ' + search_concept_id).text(concept);
    $(search_param_id).val(param);
  });
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Lato%7cMontserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"></script>
<div class="header-navigation-wrapper">
  <nav class="navbar">
    <div class="container-fluid navbar-content-row">
      <div class="pi-navigation-items">
        <form class="navbar-left" id="desktop-search-bar" name="desktop-search-bar">
          <div class="search-panel-wrap">
            <div class="clearfix">
              <input id="search-param-desktop" name="search-param" type="hidden" value="suppliers"> <input class="search-field pull-left" id="search-field" name="x" placeholder="Enter Keyword" type="text">
              <div class="search-dropdown pull-left">
                <button class="dropdown-toggle" data-toggle="dropdown" type="button"><span id="search-concept-desktop">Suppliers</span> <span class="fa fa-angle-down"></span></button>
                <ul class="dropdown-menu" role="menu">
                  <li>
                    <a href="#suppliers">Suppliers</a>
                  </li>
                  <li>
                    <a href="#buyers">Buyers</a>
                  </li>
                </ul>
              </div><span class="pull-left"><button class="search-button" type="button"><i class="fa fa-search"></i></button></span>
            </div>
          </div>
        </form>
        <ul class="nav navbar-nav navbar-right pi-bottom-nav-links">
        </ul>
      </div>
    </div>
  </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 1

简单方法：---

<input type="text" name="url_param" id="url_param" />
<input type="button" onclick="prepare_link();" value="Do it!" />

<a href="http://anyurl.com" id="target_link">Click Your New Link!</a>

<script>
function prepare_link() {
          var url_param = document.getElementById('url_param');
          var target_link = document.getElementById('target_link');

          if ( ! url_param.value ) {
               return false;  
          }

          target_link.href = target_link.href + '/' + escape(url_param.value);
     }
</script>

JavaScript - 搜索字段会在网址

1 个答案: