mirror of https://github.com/keeweb/keeweb.git
57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
var FieldViewText = require('./field-view-text');
|
||
|
|
|
||
|
|
var FieldViewAutocomplete = FieldViewText.extend({
|
||
|
|
endEdit: function(newVal, extra) {
|
||
|
|
if (this.autocomplete) {
|
||
|
|
this.autocomplete.remove();
|
||
|
|
this.autocomplete = null;
|
||
|
|
}
|
||
|
|
FieldViewText.prototype.endEdit.call(this, newVal, extra);
|
||
|
|
},
|
||
|
|
|
||
|
|
startEdit: function() {
|
||
|
|
FieldViewText.prototype.startEdit.call(this);
|
||
|
|
var fieldRect = this.input[0].getBoundingClientRect();
|
||
|
|
this.autocomplete = $('<div class="details__field-autocomplete"></div>').appendTo('body');
|
||
|
|
this.autocomplete.css({
|
||
|
|
top: fieldRect.bottom,
|
||
|
|
left: fieldRect.left,
|
||
|
|
width: fieldRect.width - 2
|
||
|
|
});
|
||
|
|
this.autocomplete.mousedown(this.autocompleteClick.bind(this));
|
||
|
|
if (!this.input.val()) {
|
||
|
|
this.updateAutocomplete();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
fieldValueInput: function(e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
this.updateAutocomplete();
|
||
|
|
FieldViewText.prototype.fieldValueInput.call(this, e);
|
||
|
|
},
|
||
|
|
|
||
|
|
updateAutocomplete: function() {
|
||
|
|
var completions = this.model.getCompletions(this.input.val());
|
||
|
|
var completionsHtml = completions.map(function(item) {
|
||
|
|
return '<div class="details__field-autocomplete-item">' + _.escape(item) + '</div>';
|
||
|
|
}).join('');
|
||
|
|
this.autocomplete.html(completionsHtml);
|
||
|
|
this.autocomplete.toggle(!!completionsHtml);
|
||
|
|
},
|
||
|
|
|
||
|
|
autocompleteClick: function(e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
if (e.target.classList.contains('details__field-autocomplete-item')) {
|
||
|
|
var selectedItem = $(e.target).text();
|
||
|
|
this.input.val(selectedItem);
|
||
|
|
this.endEdit(selectedItem);
|
||
|
|
} else {
|
||
|
|
this.afterPaint(function () { this.input.focus(); });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = FieldViewAutocomplete;
|