Bootstrap 模态显示搜索结果答案

【问题标题】：Bootstrap Modal to present search resultsBootstrap 模态显示搜索结果
【发布时间】：2016-09-12 20:50:41
【问题描述】：

我想在我的网站上以引导模式展示我的 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>

【问题讨论】：

标签： twitter-bootstrap search bootstrap-modal

【解决方案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>

【讨论】：