如何启动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>

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

Answer 1

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

searched.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);
});