Я, как и многие, давно использую библиотеку SPServices для решения многих задач.
У этой библиотеки есть функционал по автокомплиту:
Но есть у этого механизма несколько недоработок:
Просто замените код из библиотеки SPServices кодом выше.
Правда теперь и прикреплять автокомплит надо несколько иначе:
Так же был изменен цвет, под 2013 и ширину, что бы вровень было. В 2013 padding появился.
Теперь нам необходимо добавить код, который покажет popup:
Дальше добавим функцию добавление элемента списка и колбэки, которые отработают при удачном\неудачном завершении процесса создания элемента:
Теперь добавим функции, которые закрепим за кнопкой Добавить и Отмена.
При добавлении будет создавать элемент и закрытие формы, в случае нажатия по кнопке Отмена - только закрытие формы. Важно отметить, что в этих функциях мы сообщаем и результат для колбэка закрытия формы. Именно в колбэке логика по которой мы показываем уведомление.
Пример работы:
У этой библиотеки есть функционал по автокомплиту:
- нет задержки перед показом вариантов
- ничего не отображается, если нет вариантов
- нельзя предлагать варианты действий, если ничего не найдено
Т.е. необходимо поменять поведение, что бы варианты появлялись с задержкой в секунду, если ничего не нашли, то показываем как на картинке:
Тут же даем возможность добавить элемент:
Извещаем о добавлении:
Вот код уже поправленной функции $.fn.SPServices.SPAutocomplete:
$.fn.SPServices.SPAutocomplete = function(options) {
var opt = $.extend({}, {
webURL: "", // [Optional] The name of the Web (site) which contains the sourceList
sourceList: "", // The name of the list which contains the values
sourceColumn: "", // The static name of the column which contains the values
columnName: "", // The display name of the column in the form
CAMLQuery: "", // [Optional] For power users, this CAML fragment will be Anded with the default query on the relatedList
CAMLQueryOptions: "
");
// Set the width to match the width of the input control
$("#" + containerId).css("width", columnObjWidth);
// Handle keypresses
$(columnObj).keyup(function() {
// Get the column's value
var columnValue = $(this).val();
// Hide the container while we're working on it
$("#" + containerId).hide();
// Have enough characters been typed yet?
if (columnValue.length < opt.numChars) {
return false;
}
// Show the the processingIndicator as a background image in the input element
columnObj.css({
"background-image": "url(" + opt.processingIndicator + ")",
"background-position": "right",
"background-repeat": "no-repeat"
});
// Array to hold the matched values
var matchArray = [];
// Build the appropriate CAMLQuery
var camlQuery = "";
if (opt.CAMLQuery.length > 0) {
camlQuery += "";
}
camlQuery += "<" + opt.filterType + ">" + columnValue + " </" + opt.filterType + ">";
if (opt.CAMLQuery.length > 0) {
camlQuery += opt.CAMLQuery + " ";
}
camlQuery += "
" + matchArray[i] + "
";
}
// Add all the list elements to the containerId container
$("#" + containerId).html(out);
// Set up hehavior for the available values in the list element
// !myAdd if(matchArray[0] != opt.htmlifnothingfound)
if(matchArray[0] != opt.htmlifnothingfound){
$("#" + containerId + " li").click(function() {
$("#" + containerId).fadeOut(opt.slideUpSpeed);
columnObj.val($(this).text());
}).mouseover(function() {
var mouseoverCss = {
"cursor": "hand",
"color": "#ffffff",
"background": "#3399ff"
};
$(this).css(mouseoverCss);
}).mouseout(function() {
var mouseoutCss = {
"cursor": "inherit",
"color": columnObjColor,
"background": "transparent"
};
$(this).css(mouseoutCss);
});}
// If we've got some values to show, then show 'em!
if (matchArray.length > 0) {
// !myAdd delay(1000)
$("#" + containerId).slideDown(opt.slideDownSpeed).delay(2000);
}
// Remove the processing indicator
columnObj.css("background-image", "");
});
};
Просто замените код из библиотеки SPServices кодом выше.
Правда теперь и прикреплять автокомплит надо несколько иначе:
function AddAutoCompleteContractor() {
console.log("Начало выполнения функции 'AddAutoCompleteContractor()");
//Добавляем autocomplete для поля "Наименование контрагента"
$().SPServices.SPAutocomplete({
sourceList: "Contractors",
sourceColumn: "Title",
columnName: "Наименование контрагента",
ignoreCase: true,
filterType: "Contains",
numChars: 3,
slideDownSpeed: 400,
htmlifnothingfound: "Ничего не найдено! <a href='#' onClick='ShowPopupContractor()'>Добавить?</a>",
debug: true
});
}
Добавили опцию "htmlifnothingfound" - в ней указывайте html, который будет отображаться, если ничего не найдено.Так же был изменен цвет, под 2013 и ширину, что бы вровень было. В 2013 padding появился.
Теперь нам необходимо добавить код, который покажет popup:
function ShowPopupContractor() {
console.log("Начало выполнения функции 'ShowPopupContractor()");
$("#Anchor").append("Добавьте контрагента:
");
$('#popupDivContractor').show();
SP.UI.ModalDialog.showModalDialog({
html: document.getElementById('popupDivContractor'),
title: "Введите комментарий",
allowMaximize: false,
showClose: false,
autoSize: true,
dialogReturnValueCallback: onPopUpCloseCallBackContractor
});
}
Дальше добавим функцию добавление элемента списка и колбэки, которые отработают при удачном\неудачном завершении процесса создания элемента:
function createListItemContractor() {
console.log("Начало выполнения функции 'createListItemContractor()");
var clientContext = new SP.ClientContext(currentWebUrl);
var oList = clientContext.get_web().get_lists().getByTitle('Contractors');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title', $("#ContractorInput").val());
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceededСreateListItemContractor),
Function.createDelegate(this, this.onQueryFailedСreateListItemContractor)
);
}
function onQuerySucceededСreateListItemContractor() {
console.log("Начало выполнения функции 'onQuerySucceededСreateListItemContractor()");
console.log('Элемент создан: ' + oListItem.get_id());
}
function onQueryFailedСreateListItemContractor(sender, args) {
console.log("Начало выполнения функции 'onQueryFailedСreateListItemContractor()");
console.log('Ошибка при создании элемента. ' + args.get_message() + '\n' + args.get_stackTrace());
}
Теперь добавим функции, которые закрепим за кнопкой Добавить и Отмена.
При добавлении будет создавать элемент и закрытие формы, в случае нажатия по кнопке Отмена - только закрытие формы. Важно отметить, что в этих функциях мы сообщаем и результат для колбэка закрытия формы. Именно в колбэке логика по которой мы показываем уведомление.
function onPopUpCloseCallBackContractor(result, returnValue) {
console.log("Начало выполнения функции 'onPopUpCloseCallBackContractor()");
$("nobr:contains('Наименование контрагента')").closest('tr').find("input").val("");
$("nobr:contains('Наименование контрагента')").closest('tr').find("input").keyup()
if (result == SP.UI.DialogResult.OK) {
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("Контрагент добавлен!");
SP.UI.Status.setStatusPriColor(sId, 'green');
}
else if (result == SP.UI.DialogResult.cancel) {
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("Вы не стали добавлять контрагента");
SP.UI.Status.setStatusPriColor(sId, 'yellow');
}
}
function closePopupOkContractor() {
console.log("Начало выполнения функции 'closePopupOkContractor()");
createListItemContractor();
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, null);
}
function closePopupCancelContractor() {
console.log("Начало выполнения функции 'closePopupCancelContractor()");
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, null);
}
Пример работы:
