Я пытался добавить плагин jQuery select2 и получить результат, используя вызов Ajax, чтобы получить данные из созданного мной бэкэнд-API. Я смог добавить его, но он не фильтруется по заданным буквам. Вот скриншот текущего UX, который у меня есть.

Вот мой код
HTML
<select class="form-control select2" style="width: 100%;" id="CategoryID">
</select>
JQuery
$('#CategoryID').select2({
ajax: {
url: '/items/getcategories',
dataType: "json",
delay: 250,
processResults: function (data) {
return {
results: $.map(data.data, function (item) {
return {
text: item.CategoryName,
id: item.Id
}
})
};
}
}
Выход API
{
"data": [
{
"Id": 1,
"CategoryName": "sswe"
},
{
"Id": 2,
"CategoryName": "New data1xx"
},
{
"Id": 6,
"CategoryName": "Pipe"
},
{
"Id": 7,
"CategoryName": "Floor Tiles"
},
{
"Id": 8,
"CategoryName": "Wall Tiles"
},
{
"Id": 10,
"CategoryName": "Cement"
},
{
"Id": 12,
"CategoryName": "Metal Tap"
},
{
"Id": 13,
"CategoryName": "Plastic Tap"
},
{
"Id": 14,
"CategoryName": "Pan"
},
{
"Id": 15,
"CategoryName": "Floor Tiles"
},
{
"Id": 16,
"CategoryName": "Wall Tiles"
},
{
"Id": 17,
"CategoryName": "Sink"
},
{
"Id": 18,
"CategoryName": "Sink1"
},
{
"Id": 19,
"CategoryName": "Sink1"
},
{
"Id": 20,
"CategoryName": "hhhhhh"
},
{
"Id": 22,
"CategoryName": "Besinmm"
},
{
"Id": 23,
"CategoryName": "Tilesooo"
},
{
"Id": 24,
"CategoryName": "Tilesllll"
},
{
"Id": 25,
"CategoryName": "Tileskkk"
},
{
"Id": 26,
"CategoryName": "Wall Tilesllll"
},
{
"Id": 27,
"CategoryName": "Besin333"
},
{
"Id": 28,
"CategoryName": "Tiles666"
},
{
"Id": 29,
"CategoryName": "Tiles77"
},
{
"Id": 30,
"CategoryName": "Besin66"
},
{
"Id": 31,
"CategoryName": "kkdkd"
},
{
"Id": 32,
"CategoryName": "cccc"
},
{
"Id": 33,
"CategoryName": "rtrt"
},
{
"Id": 34,
"CategoryName": "yyyyucc"
},
{
"Id": 35,
"CategoryName": "Wall Tiles"
}
]
}
Любая помощь будет высоко ценится.