Question

我想在我的网站上使用Bootstrap模式呈现我的Google自定义搜索引擎结果。我不确定将什么作为表单操作（action =“”）。目前我在网站上使用了一个单独的页面。

<!-- Search  -->
<div class="hidden-sm hidden-md hidden-lg col-xs-12 search-mob">
        <form action="" method="post">
          <input class="search-input col-xs-8" name="q" placeholder="Buscar Mexpro..." size="35" type="text">
          <button title="search" class="gsc-search-button btn btn-primary col-xs-3" size="35" type="submit" value="Inicie" data-toggle="modal" data-target="#mobile-search" >Inicie</button>
        </form>
      </div>
<!-- End Search -->

模态：

<div class="modal fade" id="mobile-search" tabindex="-1" role="dialog" aria-labelledby="mobile-search" aria-hidden="true">
  <div class="modal-dialog">
  <!-- Modal Content -->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">x</button>
          <h2 id="customer-login-header">Buscar en Mexpro</h2>
        </div>
        <div class="modal-body">
          <gcse:searchresults-only></gcse:searchresults-only>  
        </div>
        <div class="modal-footer">
          <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
        </div>
      </div>
  </div>
</div>

Answer 1

有可能将搜索框放在一个div中，结果显示在另一个div中（在你的情况下是bootstrap模式中的div）。我想你还需要在显示结果之前打开模态，对吧？（这是API中不直接支持的棘手部分）

以下是如何在同一页面中将搜索框和搜索结果设置在单独的容器中： http://jsfiddle.net/5r08rbwa/1/ 要么： http://jsfiddle.net/xko0zbm6/1/

<div id="search-box">
    <gcse:searchbox></gcse:searchbox>  
</div>
<div id="search-results-container" style="border:solid 1px red">
    <div>
        Bootstrap Modal (This should be hidden and open just when you press search or enter)
    </div>
    <div id="search-results">
       <gcse:searchresults></gcse:searchresults>
    </div>
</div>

Bootstrap Modal用于显示搜索结果

1 个答案: