如何启动Fuel UX搜索功能

Question

我想使用Fuel UX搜索控件。我设计了一个如下所示的表格来声明燃料搜索控件：

  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <div class="search input-group" role="search">
        <input type="search" id="searchprefix" class="form-control" type="text" placeholder="Search Prefix">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
            <span class="sr-only">Search</span>
          </button>
        </span>
      </div>
    </div>
  </form>

搜索控件按预期显示。但是，当用户在控件中键入搜索前缀并按Enter键时，我不知道如何定义要调用的JavaScript函数。有人能告诉我一个有效的例子吗？

Answer 1

您需要定义将在按下搜索时触发的侦听器（来自fuel ux文档）：

searching.fu.search - 当用户在输入中按Enter键或单击按钮时，此事件将触发。
cleared.fu.search - 当用户清除输入时会触发此事件。 所有搜索事件都在.search类别元素上触发。

示例：

Html代码：

<div class="search input-group" role="search" id="mySearch">
  <input type="search" class="form-control" placeholder="Search"/>
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <span class="glyphicon glyphicon-search"></span>
      <span class="sr-only">Search</span>
    </button>
  </span>
</div>

Javascript代码：

$('#mySearch').on('searched.fu.search', function(evt, data) {
    // data will then contain your search string .. in this place you have to place your search handler code
    alert(data);
});