Подгрузка данных в дропдаун?

Question

[Alibek Kulseitov]

Всем привет. Задача состоит в том, чтобы при вводе в поле ввода (input) по набранным буквам в дропдаун подгружались какие-то данные. Например фото с заголовком. Это ведь задача фронт эндера? не бэкэндера?
Вот прям нужно как в инстаграме https://www.instagram.com
Есть ли примеры/туториалы такого типа?

Answer 1

[Александр Михайленко]

это задача и фронта и бэка
вот пример https://jqueryui.com/autocomplete/#remote
конечный результат может быть вот таким ( demookay.com ) начните в поиск писать что то
вот код этого дела, конкретно на это сайте

$( ".fn_search" ).autocomplete( {
        serviceUrl: 'ajax/search_products.php',
        minChars: 1,
        noCache: true,
        onSelect: function(suggestion) {
            $( "#fn_search" ).submit();
        },
        transformResult: function(result, query) {
            var data = JSON.parse(result);
            $(".fn_search").autocomplete('setOptions', {triggerSelectOnValidInput: data.suggestions.length == 1});
            return data;
        },
        formatResult: function(suggestion, currentValue) {
            var reEscape = new RegExp( '(\\' + ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'].join( '|\\' ) + ')', 'g' );
            var pattern = '(' + currentValue.replace( reEscape, '\\$1' ) + ')';
            return "<div>" + (suggestion.data.image ? "<img align=absmiddle src='" + suggestion.data.image + "'> " : '') + "</div>" + "<a href=" + suggestion.lang + "products/" + suggestion.data.url + '>' + suggestion.value.replace( new RegExp( pattern, 'gi' ), '<strong>$1<\/strong>' ) + '<\/a>' + "<span>" + suggestion.price + " " + suggestion.currency + "</span>";
        }
    } );