Any chance the search feature will be implemented as an Ember component? about semantic-ui-ember

[krzkrzkrz]

So far I tried creating a component executes an AJAX call to my endpoint, which returns a response and feeds it into source at $('.ui.search').search. The result box doesn't show any results...

The component object:

import Ember from 'ember';

export default Ember.Component.extend({
  keywordChanged: function() {
    this.set('isSearching', true);
    Ember.run.debounce(this, this.productSearch, 2000);
  }.observes('keyword'),

  productSearch: function() {
    var _this = this;

    Ember.$.ajax({
      url: '/api/v1/searches/products',
      type: 'GET',
      data: {
        name: this.get('keyword')
      },
      success: function(response) {
        // response.searches returns:
        // [
        //   {
        //     name: 'Steel hat',
        //     description: 'Lorem ipsum',
        //   },
        //   {
        //     name: 'Green flower',
        //     description: 'Lorem ipsum dolor',
        //   }
        // ];

        _this.$('.ui.search').search({
          source: response.searches,
          searchFields: ['name'],
          searchFullText: false
        });

        _this.set('isSearching', false);
      },
      error: function(reason) {
        console.log(reason);
      }
    });
  }
});

The component template:

<div {{bind-attr class='isSearching:loading :ui :fluid :search'}}>
  <div class="ui icon input">
    {{input type='text' value=keyword placeholder='Search' class='prompt'}}
    <i class="search icon"></i>
  </div>
  <div class="results"></div>
</div>

[aaronbhansen]

I've looked at doing a search component, but haven't thought of a good way yet to customize it for each persons individual needs. Since the results are so customized based on the search. We might implement a base mixin you can use for search and then you override the specific calls you need to make yours work, but haven't gotten that far yet.

[aaronbhansen]

As a follow up to this, looking at the example above, you should be able to do this all through ember and then just reinitialize the search component if changed. In your example above, you could change it to the following

<div {{bind-attr class='isSearching:loading :ui :fluid :search'}}>
  <div class="ui icon input">
    {{input type='text' value=keyword placeholder='Search' class='prompt'}}
    <i class="search icon"></i>
  </div>
  <div class="results">
  {{#each results as |result|}}
     <a class="result">{{result}}</a>
  {{/each}}
  </div>
</div>

Then after your ajax is completed, you could render the results and call $().search() on the main html again. We'll look at providing a better way to handle this through the component, but going to close this specific issue out for now.