воскресенье, 25 декабря 2016 г.

Ember автодополнение - выпадающий список - с использованием bootstrap


Использование html select это замечательно, но нет поля ввода, для того чтобы подгружать ограниченный список с бакэнда. В моем случае бакэнд выдает за раз 10 записей. Да и не разумно в select грузить 1000 записей. Поэтому, я сделал в Ember приложении для формы поля input автодополнение с выпадающим списком используя bootstrap button dropdown. Надо, конечно еще над дизайном выпадающего списка поработать, но данное решение рабочее и может использоваться в формах.


template.hbs

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Customer:</label>
    <div class="top dropdown" id="search-bar">
      <span class="fa fa-search" id="btn-search" data-toggle="dropdown"></span>
      {{input type="text" value=personValue focus-in='focusedCustomer' key-up=(action 'handleFilterCustomer') autocomplete="off" class="form-control" placeholder="Enter customer name"}}
      <ul class="dropdown-menu">
        {{#each model.customers as |customer|}}
          <li class="list-group-item" onclick={{action "customerClick" customer.name customer.id}}>{{customer.name}}</li>
        {{/each}}
      </ul>
    </div>
  </div>
</form>


route.js

model() {
  return RSVP.hash({
    task: this.store.createRecord('task'),
    customers: this.store.peekAll('person'),
  });
},


controller.js

export default Ember.Controller.extend({
  personValue: '',
  init: function() {
    this.store.unloadAll('person');
  },
  actions: {
    //При фокусе на инпут поле имитирую нажатие кнопки btn-search, для раскрытия списка
    focusedCustomer: function(){
      //console.log('focusedCustomer');
      $('#btn-search').click();
    },
    //Ищу имя после ввода 3 символа, перед этим очищаю локальное дата хранилище для person
    handleFilterCustomer(){
      let filterInputValue = this.get('personValue');
if(filterInputValue.length<3){
//console.log('value<3',filterInputValue);
        this.store.unloadAll('person');
} else {
        this.store.unloadAll('person');
        this.get('store').query('person', { name: filterInputValue });
        //console.log('value>3',filterInputValue);
}
},
    //Выбор человека из списка
    customerClick(customer_name, customer_id){
      //Вставляю имя выбранного человека в инпут
      this.set("personValue", customer_name);
      //беру запись в хранилище
      let customer = this.store.peekRecord('person', customer_id);
      //и присваиваю к полю задачи
      this.set('model.task.customer', customer);
    },
  }
});

Комментариев нет:

Отправить комментарий

django-oscar tinymce 4 filebrowser

Задача: в дашборде django-oscar загружать изображения 1. Установка django-filebrowser-no-grappelli - Открываем проект, загружаем виртуа...