Я пытаюсь создать элемент управления поиском людей с помощью компонента автозаполнения Kendo UI.
Этот компонент автозаполнения получает источник данных от стороннего продукта, который имеет очень плохо разработанные API для получения пользователей. Не существует конечной точки GET, которая будет возвращать всех пользователей, но API имеет только конечную точку поиска, где я могу указать ключевое слово, и он вернет всех пользователей, которые соответствуют этому ключевому слову. Поэтому, если мне нужно получить всех пользователей из хранилища пользователей, мне нужно будет отправить 26 (по одному на каждый алфавит) почтовых запросов, объединить результаты в одну коллекцию и передать ее в источник данных автозаполнения Kendo. Это делает страницу очень медленной. поэтому я попробовал следующий подход:
- Инициализировать элемент управления автозаполнения Kendo без данных.
- Создайте пользовательский обработчик событий фильтрации, который примет введенное значение и передаст его конечной точке POST в качестве ключевого слова для поиска, и после получения списка пользователей свяжите источник данных элемента управления.
$("#pplFinderCtrl").kendoAutoComplete({
dataSource:{
serverFiltering:true
},
dataTextField:"Name",
filter: "contains",
placeholder: "Officer",
filtering:async function(e){
var value:string = <string>$("#pplFinderCtrl").val();
console.log(value);
const users:User[]=await ProfileService.searchUser(value.toString());
let ddl: any= $("#pplFinderCtrl").data("kendoAutoComplete");
ddl.setDataSource(users);
console.log(users);
}
});
Это хорошо работает, если пользователь печатает медленно, но когда пользователь печатает быстро и после привязки, панель автозаполнения не показывает результаты, основанные на новых данных, связанных с ней. Результаты последней нажатой клавиши появятся на панели только после нажатия следующей клавиши.
Я видел опцию фильтрации сервера Kendo, но я хочу провести некоторую очистку данных после получения от API, прежде чем перейти к управлению Kendo.