Like search input field in slack, special keywords(modifiers) are used to filter out the search. This modifiers are passed as form of config object with options like:

configHash: {
    "@": { // '@' is special key (modifier) which highlighted in input
      type: 'list', // type of modifier (either list or date)
      defaultHint: 'any user', // displayed when modifier is active but has no value
      sectionTitle: 'Users', // used as header when all modifiers content displayed
      content: [ // content to be used for displaying list
        {value: 'abrahm', label: 'Abrahm Micanski' },
        {value: 'lilly', label: 'Lilly Richards' },
        {value: 'emma', label: 'Emma Roberts' },
      ]
    },

    "before:": {
      type: 'date',
      defaultHint: 'a date',
    }
  }

{{slack-search-input
  placeholder='search for objects'
  configHash=configHash
  inputValue=''
  isPopupHidden=false
  maxlength=250
  valueChange=(action 'searchValueChange')
  modifierAutoComplete=(action 'modifierAutoComplete')
  enter=(action 'search')
  focus-in=(action 'inputFocusedIn')
  focus-out=(action 'inputFocusedOut')
}}

There is also help popup which is displayed when user focuses input first time. The content of popup should be passed to slack-search-input in block form.

{{#slack-search-input as |concatToInputValue|}}
  <div class="help-title">
    Search with Filters
  </div>
  <span class='help-text'>Narrow your search using filter <span onmousedown={{action concatToInputValue 'before:'}} class='modifier'>before:</span>, <span onmousedown={{action concatToInputValue 'channel:'}} class='modifier'>channel:</span> or <span onmousedown={{action concatToInputValue '@'}} class='modifier'>@</span>. Or press plus key <span onmousedown={{action concatToInputValue '+'}} class='modifier'>+</span> to get all available filters</span>
{{/slack-search-input}}

slack-search-input options

placeholder:String

Simple placeholder displayed when input has no value

configHash:Object

Config object used for getting modifiers

inputValue:String

Initial value of input

isPopupHidden:Boolean

Can be used to hide popups

maxlength:Number

Max character length of input

valueChange(newValue:String)

Fired when inputValue changes

modifierAutoComplete(newValue:String, modifierValue:Object)

Fired when modifier has valid value

escape()

Fired when the escape key is hit

Modifier Types

Currently two types of modifiers are supported list and date:

Date - Date picker popup is showed when modifier is active.
List - List is simple list of possible options

Deserialize Query String

Once you got query string, you can deserialze it to object.

import { deserializeQueryString } from `ember-slack-search-input`;


  search() {
    let queryString = get(this, 'queryString');
    console.log(queryString) // `before:2000-23-23 lorem`
    let modifiers = deserializeQueryString(queryString);
    let before = modifiers['before:'];
    let { model, fullText, modifier, value } = before[0]; //first occurance of `before:`
    console.log(model); // moment date
    console.log(fullText); // before:2000-23-23
    console.log(modifier); // before:
    console.log(value); // 2000-23-23
  }

Requirements

Currently addon styles has hard dependency on bootstrap 3.x.x, bootstrap should be installed already to styles work properly.For input field to react properly to paste/cut events, they should be added to customEvents hash in app.js.

App = Ember.Application.extend({
  customEvents: {
    paste: "paste",
    cut: "cut"
  },
  ...
});

Installation

ember install ember-slack-search-input

TODO

write more tests
add more modifier types
remove bootstrap dependency

使用案例

input type=\search\搜索的用法

<form id="myform"> <input type="search" id="searchText" th:value="${searchText}" autocomplete="off"><a id="searchBtn" onclick="searchFun()"></a> </form> html禁用input在输入时自动弹出自带的下拉框绑定输入法搜索
搜索输入（Search Input）

Search Input 　　当监控被触发的时候，使用搜索输入把Elasticsearch搜索请求结果加入到执行上下文。有关支持的所有属性，请参阅搜索输入属性。　　在搜索输入的request对象中，你可以指定：您希望搜索的索引搜索类型搜索请求体　搜索请求体支持全Elasticsearch查询DSL--- 它与Elasticsearch _search请求体相同。　　例如，以下输
input[type=search]

input元素可以通过属性控制 MDN https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/search css3新增属性控制input[type=search] 1.::-webkit-input-placeholder 2.::-webkit-search-cancel-button 重写边框样式 input[type
去除input[type=search]后面的小x

使用css3新增的属性来控制input[type=search] input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; }
去除input search框输入自带的叉号

/* --清除谷歌浏览器下的 search 叉号 */ input::-webkit-search-cancel-button { display: none; } /* --清除IE下的 search 叉号 */ input[type="search"]::-ms-clear { display: none; }

ember-slack-search-input