new AutocompleteCustomUi('add-stock-search', 'add-stock-search-ac-dropdown', 
function(search, autocomplete_obj) {
    api_search_component(search, function(results) {
        components = results.results;
        var test = [];
        for (var i = 0; i < components.length; i++) {
            var c = components[i];
            var node = document.createElement('div');
            node.setAttribute('class', 'd-flex align-items-center');
            var img_container = document.createElement('div');
            img_container.setAttribute('class', 'flex-shrink-0');
            var text_container = document.createElement('div');
            text_container.setAttribute('class', 'flex-grow-1 ms-1');
            var img = document.createElement('img');
            var img_path = fallback_img_path;
            var style = "width:64px;max-height:64px;";
            if (c.ro_image != null) {
                img_path = c.ro_image;
                style = "max-width:64px;max-height:64px;";
            }
            img.setAttribute('src',  img_path);
            img.setAttribute('style', style)
            img_container.appendChild(img);

            var name_text = document.createTextNode(c.name);
            var heading = document.createElement('h6');
            heading.appendChild(name_text);
            text_container.appendChild(heading);
            if (c.package_data != null) {
                text_container.appendChild(document.createTextNode('in '+c.package_data.name));
            }
            if (c.ro_manufacturer_name) {
                text_container.appendChild(document.createTextNode(' by '+c.ro_manufacturer_name));
            }

            node.appendChild(img_container);
            node.appendChild(text_container);

            test.push({'ui': node, 'data': c.url})
        }
        autocomplete_obj.show_results(test, 
        function(data) {console.log(data);});
    }, function(){});
});