{% do view.registerAssetBundle("craft\\web\\assets\\vue\\VueAsset") %} {% if (suggestEnvVars ?? false) and suggestions is not defined %} {% set suggestions = craft.cp.getEnvSuggestions(suggestAliases ?? false) %} {% endif %} {%- set id = (id is defined and id ? id : 'autosuggest'~random()) %} {%- set containerId = id ~ '-container' %} {%- set class = [ 'text', (class is defined and class ? class : null), (disabled is defined and disabled ? 'disabled' : null), (size is defined and size ? null : 'fullwidth') ]|filter|join(' ') %}
{% verbatim %} {% endverbatim %}
{% js %} new Vue({ el: "#{{ containerId|namespaceInputId|e('js') }}", data() { {% block data %} var data = {{ { selected: '', filteredOptions: [], suggestions: suggestions ?? [], inputProps: { class: class, initialValue: value ?? '', style: style ?? '', id: id|namespaceInputId, name: (name ?? '')|namespaceInputName, size: size ?? '', maxlength: maxlength ?? '', autofocus: autofocus ?? false, disabled: disabled ?? false, title: title ?? '', placeholder: placeholder ?? '', }, limit: limit ?? 5 }|json_encode|raw }}; data.inputProps.onInputChange = this.onInputChange; {% endblock %} return data; }, methods: { {% block methods %} onInputChange(text) { if (text === '' || text === undefined) { this.filteredOptions = this.suggestions; return; } text = text.toLowerCase(); var filtered = []; var i, j, sectionFilter, item, name; var that = this; for (i = 0; i < this.suggestions.length; i++) { sectionFilter = []; for (j = 0; j < this.suggestions[i].data.length; j++) { item = this.suggestions[i].data[j]; if ( (item.name || item).toLowerCase().indexOf(text) !== -1 || (item.hint && item.hint.toLowerCase().indexOf(text) !== -1) ) { sectionFilter.push(item.name ? item : {name: item}); } } if (sectionFilter.length) { sectionFilter.sort(function(a, b) { var scoreA = that.scoreItem(a, text); var scoreB = that.scoreItem(b, text); if (scoreA === scoreB) { return 0; } return scoreA < scoreB ? 1 : -1; }); filtered.push({ label: this.suggestions[i].label || null, data: sectionFilter.slice(0, this.limit) }); } } this.filteredOptions = filtered; }, scoreItem(item, text) { var score = 0; if (item.name.toLowerCase().indexOf(text) !== -1) { score += 100 + text.length / item.name.length; } if (item.hint && item.hint.toLowerCase().indexOf(text) !== -1) { score += text.length / item.hint.length; } return score; }, onSelected(option) { this.selected = option.item; // Bring focus back to the input if they selected an alias if (option.item.name[0] == '@') { var input = this.$el.querySelector('input'); input.focus(); input.selectionStart = input.selectionEnd = input.value.length; } }, getSuggestionValue(suggestion) { return suggestion.item.name || suggestion.item; }, {% endblock %} } }) {% endjs %}