Автокомплит в SharePoint 2013: пошаговое руководство

Данный функционал был найден Антоном Вишняковым и описан в посте в его блоге. Большая часть контента данного поста взята из его блога с его разрешения.

Вы уже видели новый элемент управления для выбора людей в SharePoint 2013? Этот элемент управления был сильно улучшен по сравнению с предыдущей версией SharePoint. Теперь этот элемент можно использовать в клиентском коде и спокойно внедрять на своих страницах. Кроме того появился отличный функционал автозаполнения.

Замечательная новость: вы можете использовать функционал автозаполнения с любым текстовым полем. Эту функцию реализует контрол  SPClientAutoFill. Он находится в файле autofill.js в _layouts/15. Давайте посмотрим как сделать решение с его помощью.

Шаг первый: разметка и стили

Для того чтобы использовать SPClientAutoFill вам потребуется следующая разметка:

<div style='position: relative;'>
    <input type='text' id='autofillElement' />
    <div class='sp-peoplepicker-autoFillContainer' 
            id='autofillContainer' />
</div>

Обязательно position:relative для внешнего элемента, иначе будут проблемы с позиционированием подсказок.

Второй шаг: подключение библиотеки

По-умолчанию autofill.js не зарегистрирован как Script On Demand. Зарегистрировать скрипт можно тремя способами:

• Вызовом функции SP.SOD.registerSod в JavaScript
• Серверным контролом <SharePoint:ScriptLink /> на странице
• В свойстве JSLink

Внимание. Не рекомендуется добавление непосредственно тега script в разметку в SharePoint.

Далее необходимо загрузить autofill.js с помощью Script On Demand.

SP.SOD.executeFunc('autofill.js', 'SPClientAutoFill',
   function() {
       //Do work here
   });

Шаг третий: логика autocomplete

//Создание контрола
var autofill = new SPClientAutoFill('autofillElement', 
                                    'autofillContainer',
                                    OnPopulate);

Функция OnPopulate принимает параметр – элемент input, к которому привязан контрол.

Внутри функции необходимо сформировать массив объектов, описывающих элементы подсказки, и вызвать SPClientAutoFill.prototype.PopulateAutoFill.

Элементы могут иметь один из 4 типов:

• SPClientAutoFill.MenuOptionType.Option – элемент выбора, для него необходимо указывать ключ и отображаемый текст.
• SPClientAutoFill.MenuOptionType.Separator – Разделитель групп.
• SPClientAutoFill.MenuOptionType.Footer – Футер, содержащий текст.
• SPClientAutoFill.MenuOptionType.Loading – Индикатор загрузки, нужен в случае загрузки элементов с сервера.

function OnPopulate(el) {
    var result = [];
    var item = {}
 
    item[SPClientAutoFill.KeyProperty] = 'key';
    item[SPClientAutoFill.DisplayTextProperty] = 'Title';
    item[SPClientAutoFill.MenuOptionTypeProperty] = SPClientAutoFill.MenuOptionType.Option;
    result.push(item);

    item = {};
    item[SPClientAutoFill.DisplayTextProperty] = 'Footer';
    item[SPClientAutoFill.MenuOptionTypeProperty] = SPClientAutoFill.MenuOptionType.Footer;
    result.push(item);

    SPClientAutoFill.GetAutoFillObjFromInput(el).PopulateAutoFill(result, OnSelect);
}

Шаг четвертый:  логика выбора элемента

Функция OnSelect из предыдущего блока кода принимает два параметра – id элемента input и выбранный элемент autocomplete.

Так как выбрать можно только элементы типа SPClientAutoFill.MenuOptionType.Option, то у вас обязательно есть ключ и отображаемый текст выбранного элемента.

function OnSelect(targetInputId, item) {
    var targetElement = document.getElementById(targetInputId);
    targetElement.value = item[SPClientAutoFill.DisplayTextProperty];
}

Шаг пятый: изучение API и TypeScript

Полное описание класса SPClientAutoFill для TypeScript есть в проекте SPTypeScript и доступно по ссылке: https://sptypescript.codeplex.com/SourceControl/latest#Definitions/autofill.d.ts

Кроме того в проекте SPTypeScript есть примеры использования SPClientAutoFill и кастомизации поля на форме элемента списка с помощью этого класса.