function fill_add_stock_modal_component(data) {
     // component has been selected. Process it:
     document.getElementById('add-stock-search').value = '';
     console.log(data);
     var template = document.querySelector('#add-stock-modal-component-template');
     var container = document.querySelector('#add-stock-modal-component-container');
     container.innerHTML = '';
     var comp_elem = template.content.cloneNode(true);

     if (data.ro_image) {
         comp_elem.querySelector('#add-stock-cmp-img').setAttribute('src', data.ro_image);
     }
     var description_container = comp_elem.querySelector('#add-stock-cmp-desc-container');
     var heading = document.createElement('h6');
     heading.appendChild(document.createTextNode(data.name));
     description_container.appendChild(heading);
     if (data.package_data && data.package_data.name) {
         description_container.appendChild(document.createTextNode('in '+data.package_data.name));
     }
     if (data.ro_manufacturer_name) {
         description_container.appendChild(document.createElement('br'));
         description_container.appendChild(document.createTextNode('by '+data.ro_manufacturer_name));
     }
     document.querySelector('#add-stock-modal-comp-uuid').value = data.id;
     console.log("Selected element: "+data.id);
     container.appendChild(comp_elem);
}

new AutocompleteCustomUi('add-stock-search', 'add-stock-search-ac-dropdown', 
function(search, autocomplete_obj) {
    if (search.startsWith('[comp_uuid]')) {
        search = search.replace('[comp_uuid]', '');
    }
    api_search_component(search, function(results) {
        components = results.results;
        var test = [];
        for (var i = 0; i < components.length; i++) {
            var c = components[i];
            
            var text_container = document.createElement('div');
            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 = AutocompleteCustomUi.create_media_div(c.ro_image, [text_container])

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