auto-complete component with editable content

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  selections: Ember.A([
    Ember.Object.create({ name: '张三', phone: '13987654321' }),
    Ember.Object.create({ name: '李四', phone: '13987654321' }),
    Ember.Object.create({ name: '王五', phone: '13987654321' }),
    Ember.Object.create({ name: '赵六', phone: '13987654321' }),
  ]),
  
  actions: {
    select(item) {
      this.set('selected', item)
    },
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>

<pre>
<strong>Try to delete a selected item then choose again:</strong>
</pre>

{{#auto-complete-wrapper as |isActive|}}
	{{#auto-complete-input active=(mut isActive) selected=selected
  	contenteditable=true as |item|}}
    {{! PROBLEM IS RELATED WITH BELOW LINE }}
    {{! TRY TO DELETE SELECTED ITEM THEN CHOOSE AGAIN }}
  	<strong>{{item.name}}</strong> <small>{{item.phone}}</small>
  {{/auto-complete-input}}
  
  {{#auto-complete-datalist active=(mut isActive)
  	selections=selections select=(action "select") as |item|}}
  	<strong>{{item.name}}</strong> <em>{{item.phone}}</em>
  {{/auto-complete-datalist}}
{{/auto-complete-wrapper}}

auto-complete-datalist.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['auto-complete-datalist'],
  classNameBindings: ['active'],
  
  actions: {
    select(item) {
      this.attrs.select(item)
      this.attrs.active.update(false)
    }
  }
});

auto-complete-datalist.template.hbs

<ul>
{{#each selections key="@index" as |selection|}}
	<li {{action "select" selection on="click"}}>
		{{yield selection}}
  </li>
{{/each}}
</ul>

auto-complete-input.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['auto-complete-input'],
  classNameBindings: ['active'],
  attributeBindings: ['contenteditable'],
  
  click() {
    return false
  },
  
  focusIn() {
    this.attrs.active.update(true)
  }
});

auto-complete-input.template.hbs

{{yield selected}}

auto-complete-wrapper.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

auto-complete-wrapper.template.hbs

{{yield isActive}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.auto-complete-input {
  padding: .5em 1em;
  border: 1px solid #ccc;
}

.auto-complete-datalist ul {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: all .2s;
}

.auto-complete-datalist.active ul {
  opacity: 1;
  transform: scaleY(1);
}

.auto-complete-datalist ul li {
  padding: .5em 1em;
  list-style: none;
}

.auto-complete-datalist ul li:hover {
  background: #eee;
  cursor: pointer;
}

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.1.0",
    "ember-data": "2.1.0",
    "ember-template-compiler": "2.1.0"
  }
}