mirror of
https://github.com/processwire/processwire.git
synced 2025-08-13 18:24:57 +02:00
Update InputfieldPageAutocomplete.js to initialize the autocomplete on focus event, rather than on document ready. This resolves a render time issue in AdminThemeUikit when there are a lot of autocomplete inputs present, per @Toutouwai
This commit is contained in:
Ryan Cramer
@@ -98,148 +98,150 @@ var InputfieldPageAutocomplete = {
|
||||
return allowed;
|
||||
}
|
||||
|
||||
$input.autocomplete({
|
||||
minLength: 2,
|
||||
source: function(request, response) {
|
||||
var term = request.term;
|
||||
|
||||
if(hasDisableChar(term)) {
|
||||
response([]);
|
||||
return;
|
||||
}
|
||||
|
||||
$icon.attr('class', 'fa fa-fw fa-spin fa-spinner');
|
||||
|
||||
if($input.hasClass('and_words') && term.indexOf(' ') > 0) {
|
||||
// AND words mode
|
||||
term = term.replace(/\s+/, ',');
|
||||
}
|
||||
term = encodeURIComponent(term);
|
||||
var ajaxURL = url + '&' + searchField + operator + term;
|
||||
$input.one('focus', function() {
|
||||
$input.autocomplete({
|
||||
minLength: 2,
|
||||
source: function(request, response) {
|
||||
var term = request.term;
|
||||
|
||||
$.getJSON(ajaxURL, function(data) {
|
||||
|
||||
$icon.attr('class', $icon.attr('data-class'));
|
||||
numFound = data.total;
|
||||
|
||||
if(data.total > 0) {
|
||||
$icon.attr('class', 'fa fa-fw fa-angle-double-down');
|
||||
|
||||
} else if(isAddAllowed()) {
|
||||
$icon.attr('class', 'fa fa-fw fa-plus-circle');
|
||||
$note.show();
|
||||
|
||||
} else {
|
||||
$icon.attr('class', 'fa fa-fw fa-frown-o');
|
||||
if(hasDisableChar(term)) {
|
||||
response([]);
|
||||
return;
|
||||
}
|
||||
|
||||
response($.map(data.matches, function(item) {
|
||||
return {
|
||||
label: item[labelField],
|
||||
value: item[labelField],
|
||||
page_id: item.id
|
||||
$icon.attr('class', 'fa fa-fw fa-spin fa-spinner');
|
||||
|
||||
if($input.hasClass('and_words') && term.indexOf(' ') > 0) {
|
||||
// AND words mode
|
||||
term = term.replace(/\s+/, ',');
|
||||
}
|
||||
term = encodeURIComponent(term);
|
||||
var ajaxURL = url + '&' + searchField + operator + term;
|
||||
|
||||
$.getJSON(ajaxURL, function(data) {
|
||||
|
||||
$icon.attr('class', $icon.attr('data-class'));
|
||||
numFound = data.total;
|
||||
|
||||
if(data.total > 0) {
|
||||
$icon.attr('class', 'fa fa-fw fa-angle-double-down');
|
||||
|
||||
} else if(isAddAllowed()) {
|
||||
$icon.attr('class', 'fa fa-fw fa-plus-circle');
|
||||
$note.show();
|
||||
|
||||
} else {
|
||||
$icon.attr('class', 'fa fa-fw fa-frown-o');
|
||||
}
|
||||
}));
|
||||
});
|
||||
},
|
||||
select: function(event, ui) {
|
||||
if(!ui.item) return;
|
||||
var $t = $(this);
|
||||
if($t.hasClass('no_list')) {
|
||||
$t.val(ui.item.label).change();
|
||||
$t.attr('data-selectedLabel', ui.item.label);
|
||||
$t.closest('.InputfieldPageAutocomplete')
|
||||
.find('.InputfieldPageAutocompleteData').val(ui.item.page_id).change();
|
||||
$t.blur();
|
||||
return false;
|
||||
} else {
|
||||
InputfieldPageAutocomplete.pageSelected($ol, ui.item);
|
||||
$t.val('').focus();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
}).blur(function() {
|
||||
var $input = $(this);
|
||||
//if(!$input.val().length) $input.val('');
|
||||
$icon.attr('class', $icon.attr('data-class'));
|
||||
$note.hide();
|
||||
if($input.hasClass('no_list')) {
|
||||
if($value.val().length || $input.val().length) {
|
||||
if($input.hasClass('allow_any') || $input.hasClass('added_item')) {
|
||||
// allow value to remain
|
||||
response($.map(data.matches, function(item) {
|
||||
return {
|
||||
label: item[labelField],
|
||||
value: item[labelField],
|
||||
page_id: item.id
|
||||
}
|
||||
}));
|
||||
});
|
||||
},
|
||||
select: function(event, ui) {
|
||||
if(!ui.item) return;
|
||||
var $t = $(this);
|
||||
if($t.hasClass('no_list')) {
|
||||
$t.val(ui.item.label).change();
|
||||
$t.attr('data-selectedLabel', ui.item.label);
|
||||
$t.closest('.InputfieldPageAutocomplete')
|
||||
.find('.InputfieldPageAutocompleteData').val(ui.item.page_id).change();
|
||||
$t.blur();
|
||||
return false;
|
||||
} else {
|
||||
$input.val($input.attr('data-selectedLabel')).attr('placeholder', '');
|
||||
}
|
||||
} else {
|
||||
$input.val('').attr('placeholder', '').attr('data-selectedLabel', '');
|
||||
}
|
||||
//$(this).closest('.InputfieldPageAutocomplete').find('.InputfieldPageAutocompleteData').val('').change();
|
||||
}
|
||||
if($input.hasClass('focus-after-blur')) {
|
||||
$input.removeClass('focus-after-blur');
|
||||
setTimeout(function() {
|
||||
$input.focus();
|
||||
}, 250);
|
||||
}
|
||||
|
||||
}).keyup(function() {
|
||||
$icon.attr('class', $icon.attr('data-class'));
|
||||
|
||||
}).keydown(function(event) {
|
||||
if(event.keyCode == 13) {
|
||||
// prevents enter from submitting the form
|
||||
event.preventDefault();
|
||||
// instead we add the text entered as a new item
|
||||
// if there is an .InputfieldPageAdd sibling, which indicates support for this
|
||||
if(isAddAllowed()) {
|
||||
if($.trim($input.val()).length < 1) {
|
||||
$input.blur();
|
||||
InputfieldPageAutocomplete.pageSelected($ol, ui.item);
|
||||
$t.val('').focus();
|
||||
return false;
|
||||
}
|
||||
numAdded++;
|
||||
// new items have a negative page_id
|
||||
var page = { page_id: (-1 * numAdded), label: $input.val() };
|
||||
// add it to the list
|
||||
if(noList) {
|
||||
// adding new item while using input as the label
|
||||
$value.val(page.page_id);
|
||||
$("#_" + id.replace('Inputfield_', '') + '_add_items').val(page.label);
|
||||
$input.addClass('added_item').blur();
|
||||
var $addNote = $note.siblings(".InputfieldPageAutocompleteNoteAdd");
|
||||
if(!$addNote.length) {
|
||||
var $addNote = $("<div class='notes InputfieldPageAutocompleteNote InputfieldPageAutocompleteNoteAdd'></div>");
|
||||
$note.after($addNote);
|
||||
}
|
||||
|
||||
}).blur(function() {
|
||||
var $input = $(this);
|
||||
//if(!$input.val().length) $input.val('');
|
||||
$icon.attr('class', $icon.attr('data-class'));
|
||||
$note.hide();
|
||||
if($input.hasClass('no_list')) {
|
||||
if($value.val().length || $input.val().length) {
|
||||
if($input.hasClass('allow_any') || $input.hasClass('added_item')) {
|
||||
// allow value to remain
|
||||
} else {
|
||||
$input.val($input.attr('data-selectedLabel')).attr('placeholder', '');
|
||||
}
|
||||
$addNote.text($note.attr('data-adding') + ' ' + page.label);
|
||||
$addNote.show();
|
||||
|
||||
} else {
|
||||
// adding new item to list
|
||||
InputfieldPageAutocomplete.pageSelected($ol, page);
|
||||
$input.val('').blur().focus();
|
||||
$input.val('').attr('placeholder', '').attr('data-selectedLabel', '');
|
||||
}
|
||||
$note.hide();
|
||||
} else {
|
||||
$(this).addClass('focus-after-blur').blur();
|
||||
//$(this).closest('.InputfieldPageAutocomplete').find('.InputfieldPageAutocompleteData').val('').change();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if(numAdded && noList) {
|
||||
// some other key after an item already added, so remove added item info for potential new one
|
||||
var $addNote = $note.siblings(".InputfieldPageAutocompleteNoteAdd");
|
||||
var $addText = $("#_" + id.replace('Inputfield_', '') + '_add_items');
|
||||
if($addNote.length && $addText.val() != $(this).val()) {
|
||||
// added value has changed
|
||||
$addNote.remove();
|
||||
$value.val('');
|
||||
$addText.val('');
|
||||
$("#_" + id.replace('Inputfield_', '') + '_add_items').val('');
|
||||
numAdded--;
|
||||
if($input.hasClass('focus-after-blur')) {
|
||||
$input.removeClass('focus-after-blur');
|
||||
setTimeout(function() {
|
||||
$input.focus();
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}).keyup(function() {
|
||||
$icon.attr('class', $icon.attr('data-class'));
|
||||
|
||||
}).keydown(function(event) {
|
||||
if(event.keyCode == 13) {
|
||||
// prevents enter from submitting the form
|
||||
event.preventDefault();
|
||||
// instead we add the text entered as a new item
|
||||
// if there is an .InputfieldPageAdd sibling, which indicates support for this
|
||||
if(isAddAllowed()) {
|
||||
if($.trim($input.val()).length < 1) {
|
||||
$input.blur();
|
||||
return false;
|
||||
}
|
||||
numAdded++;
|
||||
// new items have a negative page_id
|
||||
var page = {page_id: (-1 * numAdded), label: $input.val()};
|
||||
// add it to the list
|
||||
if(noList) {
|
||||
// adding new item while using input as the label
|
||||
$value.val(page.page_id);
|
||||
$("#_" + id.replace('Inputfield_', '') + '_add_items').val(page.label);
|
||||
$input.addClass('added_item').blur();
|
||||
var $addNote = $note.siblings(".InputfieldPageAutocompleteNoteAdd");
|
||||
if(!$addNote.length) {
|
||||
var $addNote = $("<div class='notes InputfieldPageAutocompleteNote InputfieldPageAutocompleteNoteAdd'></div>");
|
||||
$note.after($addNote);
|
||||
}
|
||||
$addNote.text($note.attr('data-adding') + ' ' + page.label);
|
||||
$addNote.show();
|
||||
|
||||
} else {
|
||||
// adding new item to list
|
||||
InputfieldPageAutocomplete.pageSelected($ol, page);
|
||||
$input.val('').blur().focus();
|
||||
}
|
||||
$note.hide();
|
||||
} else {
|
||||
$(this).addClass('focus-after-blur').blur();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if(numAdded && noList) {
|
||||
// some other key after an item already added, so remove added item info for potential new one
|
||||
var $addNote = $note.siblings(".InputfieldPageAutocompleteNoteAdd");
|
||||
var $addText = $("#_" + id.replace('Inputfield_', '') + '_add_items');
|
||||
if($addNote.length && $addText.val() != $(this).val()) {
|
||||
// added value has changed
|
||||
$addNote.remove();
|
||||
$value.val('');
|
||||
$addText.val('');
|
||||
$("#_" + id.replace('Inputfield_', '') + '_add_items').val('');
|
||||
numAdded--;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var makeSortable = function($ol) {
|
||||
$ol.sortable({
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -177,7 +177,7 @@ class InputfieldPageAutocomplete extends Inputfield implements InputfieldHasArra
|
||||
$operator = $this->operator;
|
||||
$id = $this->id;
|
||||
$max = (int) $this->maxSelectedItems;
|
||||
$class = $this->useList ? 'has_list' : 'no_list';
|
||||
$class = 'ui-autocomplete-input ' . ($this->useList ? 'has_list' : 'no_list');
|
||||
if($this->useAndWords) $class .= " and_words";
|
||||
if($this->allowAnyValue) $class .= " allow_any";
|
||||
|
||||
|
||||
@@ -331,5 +331,7 @@ $(document).ready(function() {
|
||||
id: 'PageEditLinkTabs'
|
||||
});
|
||||
|
||||
$('#link_page_url_input').focus();
|
||||
setTimeout(function() {
|
||||
$('#link_page_url_input').focus();
|
||||
}, 250);
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user