diff --git a/templates/admin/badge/users.tmpl b/templates/admin/badge/users.tmpl
index 89d2597310..051de1b466 100644
--- a/templates/admin/badge/users.tmpl
+++ b/templates/admin/badge/users.tmpl
@@ -4,8 +4,8 @@
 			{{.Title}}
 		</h4>
 		<div class="ui attached segment">
-			<form class="ui form" action="{{.Link}}" method="post">
-				<div id="search-user-box" class="ui search input tw-align-middle">
+			<form class="ui form flex-text-block" action="{{.Link}}" method="post">
+				<div id="search-user-box" class="ui search input">
 					<input class="prompt" name="user" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 				</div>
 				<button class="ui primary button">{{ctx.Locale.Tr "admin.badges.add_user"}}</button>
diff --git a/templates/repo/settings/actions_general.tmpl b/templates/repo/settings/actions_general.tmpl
index fec17bc7af..0d55c54662 100644
--- a/templates/repo/settings/actions_general.tmpl
+++ b/templates/repo/settings/actions_general.tmpl
@@ -86,8 +86,8 @@
 	</div>
 	{{end}}
 	<div class="ui bottom attached segment">
-		<form class="ui form form-fetch-action" action="{{.Link}}/collaborative_owner/add" method="post">
-			<div id="search-user-box" class="ui search input tw-align-middle" data-include-orgs="true">
+		<form class="ui form form-fetch-action flex-text-block" action="{{.Link}}/collaborative_owner/add" method="post">
+			<div id="search-user-box" class="ui search input" data-include-orgs="true">
 				<input class="prompt" name="collaborative_owner" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 			</div>
 			<button class="ui primary button">{{ctx.Locale.Tr "actions.general.add_collaborative_owner"}}</button>
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index d10ae06da5..48e3f3287e 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/templates/repo/settings/collaboration.tmpl
@@ -39,8 +39,8 @@
 		</div>
 		{{end}}
 		<div class="ui bottom attached segment">
-			<form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
-				<div id="search-user-box" class="ui search input tw-align-middle">
+			<form class="ui form flex-text-block" id="repo-collab-form" action="{{.Link}}" method="post">
+				<div id="search-user-box" class="ui search input">
 					<input class="prompt" name="collaborator" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 				</div>
 				<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.add_collaborator"}}</button>
@@ -106,8 +106,8 @@
 			{{end}}
 			<div class="ui bottom attached segment">
 				{{if $allowedToChangeTeams}}
-					<form class="ui form" id="repo-collab-team-form" action="{{.Link}}/team" method="post">
-						<div id="search-team-box" class="ui search input tw-align-middle" data-org-name="{{.OrgName}}">
+					<form class="ui form flex-text-block" id="repo-collab-team-form" action="{{.Link}}/team" method="post">
+						<div id="search-team-box" class="ui search input" data-org-name="{{.OrgName}}">
 							<input class="prompt" name="team" placeholder="{{ctx.Locale.Tr "search.team_kind"}}" autocomplete="off" required>
 						</div>
 						<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.add_team"}}</button>
diff --git a/tests/e2e/repo-collab.test.ts b/tests/e2e/repo-collab.test.ts
new file mode 100644
index 0000000000..4efdc85c6a
--- /dev/null
+++ b/tests/e2e/repo-collab.test.ts
@@ -0,0 +1,24 @@
+import {env} from 'node:process';
+import {test, expect} from '@playwright/test';
+import {apiCreateRepo, apiCreateUser, login, randomString} from './utils.ts';
+
+test('add collaborator search', async ({page, request}) => {
+  const userName = `repo-collab-${randomString(8)}`;
+  const repoName = `repo-collab-${randomString(8)}`;
+
+  await Promise.all([
+    apiCreateUser(request, userName),
+    apiCreateRepo(request, {name: repoName, autoInit: false}),
+    login(page),
+  ]);
+
+  await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/settings/collaboration`);
+  const input = page.locator('#search-user-box input.prompt');
+  await input.fill(userName.slice(-6));
+  const result = page.locator('#search-user-box .results .result').first();
+  await expect(result).toContainText(userName);
+  await result.click();
+  await expect(input).toHaveValue(userName);
+  await page.getByRole('button', {name: 'Add Collaborator'}).click();
+  await expect(page.locator('body')).toContainText(userName);
+});
diff --git a/web_src/fomantic/build/components/search.js b/web_src/fomantic/build/components/search.js
deleted file mode 100644
index 6f2c7ee699..0000000000
--- a/web_src/fomantic/build/components/search.js
+++ /dev/null
@@ -1,1565 +0,0 @@
-/*!
- * # Fomantic-UI - Search
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
-  return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
-  ? window
-  : (typeof self != 'undefined' && self.Math == Math)
-    ? self
-    : Function('return this')()
-;
-
-$.fn.search = function(parameters) {
-  var
-    $allModules     = $(this),
-    moduleSelector  = $allModules.selector || '',
-
-    time            = new Date().getTime(),
-    performance     = [],
-
-    query           = arguments[0],
-    methodInvoked   = (typeof query == 'string'),
-    queryArguments  = [].slice.call(arguments, 1),
-    returnedValue
-  ;
-  $(this)
-    .each(function() {
-      var
-        settings          = ( $.isPlainObject(parameters) )
-          ? $.extend(true, {}, $.fn.search.settings, parameters)
-          : $.extend({}, $.fn.search.settings),
-
-        className        = settings.className,
-        metadata         = settings.metadata,
-        regExp           = settings.regExp,
-        fields           = settings.fields,
-        selector         = settings.selector,
-        error            = settings.error,
-        namespace        = settings.namespace,
-
-        eventNamespace   = '.' + namespace,
-        moduleNamespace  = namespace + '-module',
-
-        $module          = $(this),
-        $prompt          = $module.find(selector.prompt),
-        $searchButton    = $module.find(selector.searchButton),
-        $results         = $module.find(selector.results),
-        $result          = $module.find(selector.result),
-        $category        = $module.find(selector.category),
-
-        element          = this,
-        instance         = $module.data(moduleNamespace),
-
-        disabledBubbled  = false,
-        resultsDismissed = false,
-
-        module
-      ;
-
-      module = {
-
-        initialize: function() {
-          module.verbose('Initializing module');
-          module.get.settings();
-          module.determine.searchFields();
-          module.bind.events();
-          module.set.type();
-          module.create.results();
-          module.instantiate();
-        },
-        instantiate: function() {
-          module.verbose('Storing instance of module', module);
-          instance = module;
-          $module
-            .data(moduleNamespace, module)
-          ;
-        },
-        destroy: function() {
-          module.verbose('Destroying instance');
-          $module
-            .off(eventNamespace)
-            .removeData(moduleNamespace)
-          ;
-        },
-
-        refresh: function() {
-          module.debug('Refreshing selector cache');
-          $prompt         = $module.find(selector.prompt);
-          $searchButton   = $module.find(selector.searchButton);
-          $category       = $module.find(selector.category);
-          $results        = $module.find(selector.results);
-          $result         = $module.find(selector.result);
-        },
-
-        refreshResults: function() {
-          $results = $module.find(selector.results);
-          $result  = $module.find(selector.result);
-        },
-
-        bind: {
-          events: function() {
-            module.verbose('Binding events to search');
-            if(settings.automatic) {
-              $module
-                .on(module.get.inputEvent() + eventNamespace, selector.prompt, module.event.input)
-              ;
-              $prompt
-                .attr('autocomplete', 'off')
-              ;
-            }
-            $module
-              // prompt
-              .on('focus'     + eventNamespace, selector.prompt, module.event.focus)
-              .on('blur'      + eventNamespace, selector.prompt, module.event.blur)
-              .on('keydown'   + eventNamespace, selector.prompt, module.handleKeyboard)
-              // search button
-              .on('click'     + eventNamespace, selector.searchButton, module.query)
-              // results
-              .on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown)
-              .on('mouseup'   + eventNamespace, selector.results, module.event.result.mouseup)
-              .on('click'     + eventNamespace, selector.result,  module.event.result.click)
-            ;
-          }
-        },
-
-        determine: {
-          searchFields: function() {
-            // this makes sure $.extend does not add specified search fields to default fields
-            // this is the only setting which should not extend defaults
-            if(parameters && parameters.searchFields !== undefined) {
-              settings.searchFields = parameters.searchFields;
-            }
-          }
-        },
-
-        event: {
-          input: function() {
-            if(settings.searchDelay) {
-              clearTimeout(module.timer);
-              module.timer = setTimeout(function() {
-                if(module.is.focused()) {
-                  module.query();
-                }
-              }, settings.searchDelay);
-            }
-            else {
-              module.query();
-            }
-          },
-          focus: function() {
-            module.set.focus();
-            if(settings.searchOnFocus && module.has.minimumCharacters() ) {
-              module.query(function() {
-                if(module.can.show() ) {
-                  module.showResults();
-                }
-              });
-            }
-          },
-          blur: function(event) {
-            var
-              pageLostFocus = (document.activeElement === this),
-              callback      = function() {
-                module.cancel.query();
-                module.remove.focus();
-                module.timer = setTimeout(module.hideResults, settings.hideDelay);
-              }
-            ;
-            if(pageLostFocus) {
-              return;
-            }
-            resultsDismissed = false;
-            if(module.resultsClicked) {
-              module.debug('Determining if user action caused search to close');
-              $module
-                .one('click.close' + eventNamespace, selector.results, function(event) {
-                  if(module.is.inMessage(event) || disabledBubbled) {
-                    $prompt.focus();
-                    return;
-                  }
-                  disabledBubbled = false;
-                  if( !module.is.animating() && !module.is.hidden()) {
-                    callback();
-                  }
-                })
-              ;
-            }
-            else {
-              module.debug('Input blurred without user action, closing results');
-              callback();
-            }
-          },
-          result: {
-            mousedown: function() {
-              module.resultsClicked = true;
-            },
-            mouseup: function() {
-              module.resultsClicked = false;
-            },
-            click: function(event) {
-              module.debug('Search result selected');
-              var
-                $result = $(this),
-                $title  = $result.find(selector.title).eq(0),
-                $link   = $result.is('a[href]')
-                  ? $result
-                  : $result.find('a[href]').eq(0),
-                href    = $link.attr('href')   || false,
-                target  = $link.attr('target') || false,
-                // title is used for result lookup
-                value   = ($title.length > 0)
-                  ? $title.text()
-                  : false,
-                results = module.get.results(),
-                result  = $result.data(metadata.result) || module.get.result(value, results)
-              ;
-              if(value) {
-                module.set.value(value);
-              }
-              if( $.isFunction(settings.onSelect) ) {
-                if(settings.onSelect.call(element, result, results) === false) {
-                  module.debug('Custom onSelect callback cancelled default select action');
-                  disabledBubbled = true;
-                  return;
-                }
-              }
-              module.hideResults();
-              if(href) {
-                event.preventDefault();
-                module.verbose('Opening search link found in result', $link);
-                if(target == '_blank' || event.ctrlKey) {
-                  window.open(href);
-                }
-                else {
-                  window.location.href = (href);
-                }
-              }
-            }
-          }
-        },
-        ensureVisible: function ensureVisible($el) {
-          var elTop, elBottom, resultsScrollTop, resultsHeight;
-
-          elTop = $el.position().top;
-          elBottom = elTop + $el.outerHeight(true);
-
-          resultsScrollTop = $results.scrollTop();
-          resultsHeight = $results.height()
-            parseInt($results.css('paddingTop'), 0) +
-            parseInt($results.css('paddingBottom'), 0);
-            
-          if (elTop < 0) {
-            $results.scrollTop(resultsScrollTop + elTop);
-          }
-
-          else if (resultsHeight < elBottom) {
-            $results.scrollTop(resultsScrollTop + (elBottom - resultsHeight));
-          }
-        },
-        handleKeyboard: function(event) {
-          var
-            // force selector refresh
-            $result         = $module.find(selector.result),
-            $category       = $module.find(selector.category),
-            $activeResult   = $result.filter('.' + className.active),
-            currentIndex    = $result.index( $activeResult ),
-            resultSize      = $result.length,
-            hasActiveResult = $activeResult.length > 0,
-
-            keyCode         = event.which,
-            keys            = {
-              backspace : 8,
-              enter     : 13,
-              escape    : 27,
-              upArrow   : 38,
-              downArrow : 40
-            },
-            newIndex
-          ;
-          // search shortcuts
-          if(keyCode == keys.escape) {
-            module.verbose('Escape key pressed, blurring search field');
-            module.hideResults();
-            resultsDismissed = true;
-          }
-          if( module.is.visible() ) {
-            if(keyCode == keys.enter) {
-              module.verbose('Enter key pressed, selecting active result');
-              if( $result.filter('.' + className.active).length > 0 ) {
-                module.event.result.click.call($result.filter('.' + className.active), event);
-                event.preventDefault();
-                return false;
-              }
-            }
-            else if(keyCode == keys.upArrow && hasActiveResult) {
-              module.verbose('Up key pressed, changing active result');
-              newIndex = (currentIndex - 1 < 0)
-                ? currentIndex
-                : currentIndex - 1
-              ;
-              $category
-                .removeClass(className.active)
-              ;
-              $result
-                .removeClass(className.active)
-                .eq(newIndex)
-                  .addClass(className.active)
-                  .closest($category)
-                    .addClass(className.active)
-              ;
-              module.ensureVisible($result.eq(newIndex));
-              event.preventDefault();
-            }
-            else if(keyCode == keys.downArrow) {
-              module.verbose('Down key pressed, changing active result');
-              newIndex = (currentIndex + 1 >= resultSize)
-                ? currentIndex
-                : currentIndex + 1
-              ;
-              $category
-                .removeClass(className.active)
-              ;
-              $result
-                .removeClass(className.active)
-                .eq(newIndex)
-                  .addClass(className.active)
-                  .closest($category)
-                    .addClass(className.active)
-              ;
-              module.ensureVisible($result.eq(newIndex));
-              event.preventDefault();
-            }
-          }
-          else {
-            // query shortcuts
-            if(keyCode == keys.enter) {
-              module.verbose('Enter key pressed, executing query');
-              module.query();
-              module.set.buttonPressed();
-              $prompt.one('keyup', module.remove.buttonFocus);
-            }
-          }
-        },
-
-        setup: {
-          api: function(searchTerm, callback) {
-            var
-              apiSettings = {
-                debug             : settings.debug,
-                on                : false,
-                cache             : settings.cache,
-                action            : 'search',
-                urlData           : {
-                  query : searchTerm
-                },
-                onSuccess         : function(response) {
-                  module.parse.response.call(element, response, searchTerm);
-                  callback();
-                },
-                onFailure         : function() {
-                  module.displayMessage(error.serverError);
-                  callback();
-                },
-                onAbort : function(response) {
-                },
-                onError           : module.error
-              }
-            ;
-            $.extend(true, apiSettings, settings.apiSettings);
-            module.verbose('Setting up API request', apiSettings);
-            $module.api(apiSettings);
-          }
-        },
-
-        can: {
-          useAPI: function() {
-            return $.fn.api !== undefined;
-          },
-          show: function() {
-            return module.is.focused() && !module.is.visible() && !module.is.empty();
-          },
-          transition: function() {
-            return settings.transition && $.fn.transition !== undefined && $module.transition('is supported');
-          }
-        },
-
-        is: {
-          animating: function() {
-            return $results.hasClass(className.animating);
-          },
-          hidden: function() {
-            return $results.hasClass(className.hidden);
-          },
-          inMessage: function(event) {
-            if(!event.target) {
-              return;
-            }
-            var
-              $target = $(event.target),
-              isInDOM = $.contains(document.documentElement, event.target)
-            ;
-            return (isInDOM && $target.closest(selector.message).length > 0);
-          },
-          empty: function() {
-            return ($results.html() === '');
-          },
-          visible: function() {
-            return ($results.filter(':visible').length > 0);
-          },
-          focused: function() {
-            return ($prompt.filter(':focus').length > 0);
-          }
-        },
-
-        get: {
-          settings: function() {
-            if($.isPlainObject(parameters) && parameters.searchFullText) {
-              settings.fullTextSearch = parameters.searchFullText;
-              module.error(settings.error.oldSearchSyntax, element);
-            }
-            if (settings.ignoreDiacritics && !String.prototype.normalize) {
-              settings.ignoreDiacritics = false;
-              module.error(error.noNormalize, element);
-            }
-          },
-          inputEvent: function() {
-            var
-              prompt = $prompt[0],
-              inputEvent   = (prompt !== undefined && prompt.oninput !== undefined)
-                ? 'input'
-                : (prompt !== undefined && prompt.onpropertychange !== undefined)
-                  ? 'propertychange'
-                  : 'keyup'
-            ;
-            return inputEvent;
-          },
-          value: function() {
-            return $prompt.val();
-          },
-          results: function() {
-            var
-              results = $module.data(metadata.results)
-            ;
-            return results;
-          },
-          result: function(value, results) {
-            var
-              result       = false
-            ;
-            value = (value !== undefined)
-              ? value
-              : module.get.value()
-            ;
-            results = (results !== undefined)
-              ? results
-              : module.get.results()
-            ;
-            if(settings.type === 'category') {
-              module.debug('Finding result that matches', value);
-              $.each(results, function(index, category) {
-                if(Array.isArray(category.results)) {
-                  result = module.search.object(value, category.results)[0];
-                  // don't continue searching if a result is found
-                  if(result) {
-                    return false;
-                  }
-                }
-              });
-            }
-            else {
-              module.debug('Finding result in results object', value);
-              result = module.search.object(value, results)[0];
-            }
-            return result || false;
-          },
-        },
-
-        select: {
-          firstResult: function() {
-            module.verbose('Selecting first result');
-            $result.first().addClass(className.active);
-          }
-        },
-
-        set: {
-          focus: function() {
-            $module.addClass(className.focus);
-          },
-          loading: function() {
-            $module.addClass(className.loading);
-          },
-          value: function(value) {
-            module.verbose('Setting search input value', value);
-            $prompt
-              .val(value)
-            ;
-          },
-          type: function(type) {
-            type = type || settings.type;
-            if(settings.type == 'category') {
-              $module.addClass(settings.type);
-            }
-          },
-          buttonPressed: function() {
-            $searchButton.addClass(className.pressed);
-          }
-        },
-
-        remove: {
-          loading: function() {
-            $module.removeClass(className.loading);
-          },
-          focus: function() {
-            $module.removeClass(className.focus);
-          },
-          buttonPressed: function() {
-            $searchButton.removeClass(className.pressed);
-          },
-          diacritics: function(text) {
-            return settings.ignoreDiacritics ?  text.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : text;
-          }
-        },
-
-        query: function(callback) {
-          callback = $.isFunction(callback)
-            ? callback
-            : function(){}
-          ;
-          var
-            searchTerm = module.get.value(),
-            cache = module.read.cache(searchTerm)
-          ;
-          callback = callback || function() {};
-          if( module.has.minimumCharacters() )  {
-            if(cache) {
-              module.debug('Reading result from cache', searchTerm);
-              module.save.results(cache.results);
-              module.addResults(cache.html);
-              module.inject.id(cache.results);
-              callback();
-            }
-            else {
-              module.debug('Querying for', searchTerm);
-              if($.isPlainObject(settings.source) || Array.isArray(settings.source)) {
-                module.search.local(searchTerm);
-                callback();
-              }
-              else if( module.can.useAPI() ) {
-                module.search.remote(searchTerm, callback);
-              }
-              else {
-                module.error(error.source);
-                callback();
-              }
-            }
-            settings.onSearchQuery.call(element, searchTerm);
-          }
-          else {
-            module.hideResults();
-          }
-        },
-
-        search: {
-          local: function(searchTerm) {
-            var
-              results = module.search.object(searchTerm, settings.source),
-              searchHTML
-            ;
-            module.set.loading();
-            module.save.results(results);
-            module.debug('Returned full local search results', results);
-            if(settings.maxResults > 0) {
-              module.debug('Using specified max results', results);
-              results = results.slice(0, settings.maxResults);
-            }
-            if(settings.type == 'category') {
-              results = module.create.categoryResults(results);
-            }
-            searchHTML = module.generateResults({
-              results: results
-            });
-            module.remove.loading();
-            module.addResults(searchHTML);
-            module.inject.id(results);
-            module.write.cache(searchTerm, {
-              html    : searchHTML,
-              results : results
-            });
-          },
-          remote: function(searchTerm, callback) {
-            callback = $.isFunction(callback)
-              ? callback
-              : function(){}
-            ;
-            if($module.api('is loading')) {
-              $module.api('abort');
-            }
-            module.setup.api(searchTerm, callback);
-            $module
-              .api('query')
-            ;
-          },
-          object: function(searchTerm, source, searchFields) {
-            searchTerm = module.remove.diacritics(String(searchTerm));
-            var
-              results      = [],
-              exactResults = [],
-              fuzzyResults = [],
-              searchExp    = searchTerm.replace(regExp.escape, '\\$&'),
-              matchRegExp  = new RegExp(regExp.beginsWith + searchExp, 'i'),
-
-              // avoid duplicates when pushing results
-              addResult = function(array, result) {
-                var
-                  notResult      = ($.inArray(result, results) == -1),
-                  notFuzzyResult = ($.inArray(result, fuzzyResults) == -1),
-                  notExactResults = ($.inArray(result, exactResults) == -1)
-                ;
-                if(notResult && notFuzzyResult && notExactResults) {
-                  array.push(result);
-                }
-              }
-            ;
-            source = source || settings.source;
-            searchFields = (searchFields !== undefined)
-              ? searchFields
-              : settings.searchFields
-            ;
-
-            // search fields should be array to loop correctly
-            if(!Array.isArray(searchFields)) {
-              searchFields = [searchFields];
-            }
-
-            // exit conditions if no source
-            if(source === undefined || source === false) {
-              module.error(error.source);
-              return [];
-            }
-            // iterate through search fields looking for matches
-            $.each(searchFields, function(index, field) {
-              $.each(source, function(label, content) {
-                var
-                  fieldExists = (typeof content[field] == 'string') || (typeof content[field] == 'number')
-                ;
-                if(fieldExists) {
-                  var text;
-                  if (typeof content[field] === 'string'){  
-                      text = module.remove.diacritics(content[field]);
-                  } else {
-                      text = content[field].toString(); 
-                  }
-                  if( text.search(matchRegExp) !== -1) {
-                    // content starts with value (first in results)
-                    addResult(results, content);
-                  }
-                  else if(settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, text) ) {
-                    // content fuzzy matches (last in results)
-                    addResult(exactResults, content);
-                  }
-                  else if(settings.fullTextSearch == true && module.fuzzySearch(searchTerm, text) ) {
-                    // content fuzzy matches (last in results)
-                    addResult(fuzzyResults, content);
-                  }
-                }
-              });
-            });
-            $.merge(exactResults, fuzzyResults);
-            $.merge(results, exactResults);
-            return results;
-          }
-        },
-        exactSearch: function (query, term) {
-          query = query.toLowerCase();
-          term  = term.toLowerCase();
-          return term.indexOf(query) > -1;
-        },
-        fuzzySearch: function(query, term) {
-          var
-            termLength  = term.length,
-            queryLength = query.length
-          ;
-          if(typeof query !== 'string') {
-            return false;
-          }
-          query = query.toLowerCase();
-          term  = term.toLowerCase();
-          if(queryLength > termLength) {
-            return false;
-          }
-          if(queryLength === termLength) {
-            return (query === term);
-          }
-          search: for (var characterIndex = 0, nextCharacterIndex = 0; characterIndex < queryLength; characterIndex++) {
-            var
-              queryCharacter = query.charCodeAt(characterIndex)
-            ;
-            while(nextCharacterIndex < termLength) {
-              if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) {
-                continue search;
-              }
-            }
-            return false;
-          }
-          return true;
-        },
-
-        parse: {
-          response: function(response, searchTerm) {
-            if(Array.isArray(response)){
-                var o={};
-                o[fields.results]=response;
-                response = o;
-            }
-            var
-              searchHTML = module.generateResults(response)
-            ;
-            module.verbose('Parsing server response', response);
-            if(response !== undefined) {
-              if(searchTerm !== undefined && response[fields.results] !== undefined) {
-                module.addResults(searchHTML);
-                module.inject.id(response[fields.results]);
-                module.write.cache(searchTerm, {
-                  html    : searchHTML,
-                  results : response[fields.results]
-                });
-                module.save.results(response[fields.results]);
-              }
-            }
-          }
-        },
-
-        cancel: {
-          query: function() {
-            if( module.can.useAPI() ) {
-              $module.api('abort');
-            }
-          }
-        },
-
-        has: {
-          minimumCharacters: function() {
-            var
-              searchTerm    = module.get.value(),
-              numCharacters = searchTerm.length
-            ;
-            return (numCharacters >= settings.minCharacters);
-          },
-          results: function() {
-            if($results.length === 0) {
-              return false;
-            }
-            var
-              html = $results.html()
-            ;
-            return html != '';
-          }
-        },
-
-        clear: {
-          cache: function(value) {
-            var
-              cache = $module.data(metadata.cache)
-            ;
-            if(!value) {
-              module.debug('Clearing cache', value);
-              $module.removeData(metadata.cache);
-            }
-            else if(value && cache && cache[value]) {
-              module.debug('Removing value from cache', value);
-              delete cache[value];
-              $module.data(metadata.cache, cache);
-            }
-          }
-        },
-
-        read: {
-          cache: function(name) {
-            var
-              cache = $module.data(metadata.cache)
-            ;
-            if(settings.cache) {
-              module.verbose('Checking cache for generated html for query', name);
-              return (typeof cache == 'object') && (cache[name] !== undefined)
-                ? cache[name]
-                : false
-              ;
-            }
-            return false;
-          }
-        },
-
-        create: {
-          categoryResults: function(results) {
-            var
-              categoryResults = {}
-            ;
-            $.each(results, function(index, result) {
-              if(!result.category) {
-                return;
-              }
-              if(categoryResults[result.category] === undefined) {
-                module.verbose('Creating new category of results', result.category);
-                categoryResults[result.category] = {
-                  name    : result.category,
-                  results : [result]
-                };
-              }
-              else {
-                categoryResults[result.category].results.push(result);
-              }
-            });
-            return categoryResults;
-          },
-          id: function(resultIndex, categoryIndex) {
-            var
-              resultID      = (resultIndex + 1), // not zero indexed
-              letterID,
-              id
-            ;
-            if(categoryIndex !== undefined) {
-              // start char code for "A"
-              letterID = String.fromCharCode(97 + categoryIndex);
-              id          = letterID + resultID;
-              module.verbose('Creating category result id', id);
-            }
-            else {
-              id = resultID;
-              module.verbose('Creating result id', id);
-            }
-            return id;
-          },
-          results: function() {
-            if($results.length === 0) {
-              $results = $('<div />')
-                .addClass(className.results)
-                .appendTo($module)
-              ;
-            }
-          }
-        },
-
-        inject: {
-          result: function(result, resultIndex, categoryIndex) {
-            module.verbose('Injecting result into results');
-            var
-              $selectedResult = (categoryIndex !== undefined)
-                ? $results
-                    .children().eq(categoryIndex)
-                      .children(selector.results)
-                        .first()
-                        .children(selector.result)
-                          .eq(resultIndex)
-                : $results
-                    .children(selector.result).eq(resultIndex)
-            ;
-            module.verbose('Injecting results metadata', $selectedResult);
-            $selectedResult
-              .data(metadata.result, result)
-            ;
-          },
-          id: function(results) {
-            module.debug('Injecting unique ids into results');
-            var
-              // since results may be object, we must use counters
-              categoryIndex = 0,
-              resultIndex   = 0
-            ;
-            if(settings.type === 'category') {
-              // iterate through each category result
-              $.each(results, function(index, category) {
-                if(category.results.length > 0){
-                  resultIndex = 0;
-                  $.each(category.results, function(index, result) {
-                    if(result.id === undefined) {
-                      result.id = module.create.id(resultIndex, categoryIndex);
-                    }
-                    module.inject.result(result, resultIndex, categoryIndex);
-                    resultIndex++;
-                  });
-                  categoryIndex++;
-                }
-              });
-            }
-            else {
-              // top level
-              $.each(results, function(index, result) {
-                if(result.id === undefined) {
-                  result.id = module.create.id(resultIndex);
-                }
-                module.inject.result(result, resultIndex);
-                resultIndex++;
-              });
-            }
-            return results;
-          }
-        },
-
-        save: {
-          results: function(results) {
-            module.verbose('Saving current search results to metadata', results);
-            $module.data(metadata.results, results);
-          }
-        },
-
-        write: {
-          cache: function(name, value) {
-            var
-              cache = ($module.data(metadata.cache) !== undefined)
-                ? $module.data(metadata.cache)
-                : {}
-            ;
-            if(settings.cache) {
-              module.verbose('Writing generated html to cache', name, value);
-              cache[name] = value;
-              $module
-                .data(metadata.cache, cache)
-              ;
-            }
-          }
-        },
-
-        addResults: function(html) {
-          if( $.isFunction(settings.onResultsAdd) ) {
-            if( settings.onResultsAdd.call($results, html) === false ) {
-              module.debug('onResultsAdd callback cancelled default action');
-              return false;
-            }
-          }
-          if(html) {
-            $results
-              .html(html)
-            ;
-            module.refreshResults();
-            if(settings.selectFirstResult) {
-              module.select.firstResult();
-            }
-            module.showResults();
-          }
-          else {
-            module.hideResults(function() {
-              $results.empty();
-            });
-          }
-        },
-
-        showResults: function(callback) {
-          callback = $.isFunction(callback)
-            ? callback
-            : function(){}
-          ;
-          if(resultsDismissed) {
-            return;
-          }
-          if(!module.is.visible() && module.has.results()) {
-            if( module.can.transition() ) {
-              module.debug('Showing results with css animations');
-              $results
-                .transition({
-                  animation  : settings.transition + ' in',
-                  debug      : settings.debug,
-                  verbose    : settings.verbose,
-                  duration   : settings.duration,
-                  onShow     : function() {
-                    var $firstResult = $module.find(selector.result).eq(0);
-                    if($firstResult.length > 0) {
-                      module.ensureVisible($firstResult);
-                    }
-                  },
-                  onComplete : function() {
-                    callback();
-                  },
-                  queue      : true
-                })
-              ;
-            }
-            else {
-              module.debug('Showing results with javascript');
-              $results
-                .stop()
-                .fadeIn(settings.duration, settings.easing)
-              ;
-            }
-            settings.onResultsOpen.call($results);
-          }
-        },
-        hideResults: function(callback) {
-          callback = $.isFunction(callback)
-            ? callback
-            : function(){}
-          ;
-          if( module.is.visible() ) {
-            if( module.can.transition() ) {
-              module.debug('Hiding results with css animations');
-              $results
-                .transition({
-                  animation  : settings.transition + ' out',
-                  debug      : settings.debug,
-                  verbose    : settings.verbose,
-                  duration   : settings.duration,
-                  onComplete : function() {
-                    callback();
-                  },
-                  queue      : true
-                })
-              ;
-            }
-            else {
-              module.debug('Hiding results with javascript');
-              $results
-                .stop()
-                .fadeOut(settings.duration, settings.easing)
-              ;
-            }
-            settings.onResultsClose.call($results);
-          }
-        },
-
-        generateResults: function(response) {
-          module.debug('Generating html from response', response);
-          var
-            template       = settings.templates[settings.type],
-            isProperObject = ($.isPlainObject(response[fields.results]) && !$.isEmptyObject(response[fields.results])),
-            isProperArray  = (Array.isArray(response[fields.results]) && response[fields.results].length > 0),
-            html           = ''
-          ;
-          if(isProperObject || isProperArray ) {
-            if(settings.maxResults > 0) {
-              if(isProperObject) {
-                if(settings.type == 'standard') {
-                  module.error(error.maxResults);
-                }
-              }
-              else {
-                response[fields.results] = response[fields.results].slice(0, settings.maxResults);
-              }
-            }
-            if($.isFunction(template)) {
-              html = template(response, fields, settings.preserveHTML);
-            }
-            else {
-              module.error(error.noTemplate, false);
-            }
-          }
-          else if(settings.showNoResults) {
-            html = module.displayMessage(error.noResults, 'empty', error.noResultsHeader);
-          }
-          settings.onResults.call(element, response);
-          return html;
-        },
-
-        displayMessage: function(text, type, header) {
-          type = type || 'standard';
-          module.debug('Displaying message', text, type, header);
-          module.addResults( settings.templates.message(text, type, header) );
-          return settings.templates.message(text, type, header);
-        },
-
-        setting: function(name, value) {
-          if( $.isPlainObject(name) ) {
-            $.extend(true, settings, name);
-          }
-          else if(value !== undefined) {
-            settings[name] = value;
-          }
-          else {
-            return settings[name];
-          }
-        },
-        internal: function(name, value) {
-          if( $.isPlainObject(name) ) {
-            $.extend(true, module, name);
-          }
-          else if(value !== undefined) {
-            module[name] = value;
-          }
-          else {
-            return module[name];
-          }
-        },
-        debug: function() {
-          if(!settings.silent && settings.debug) {
-            if(settings.performance) {
-              module.performance.log(arguments);
-            }
-            else {
-              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
-              module.debug.apply(console, arguments);
-            }
-          }
-        },
-        verbose: function() {
-          if(!settings.silent && settings.verbose && settings.debug) {
-            if(settings.performance) {
-              module.performance.log(arguments);
-            }
-            else {
-              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
-              module.verbose.apply(console, arguments);
-            }
-          }
-        },
-        error: function() {
-          if(!settings.silent) {
-            module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
-            module.error.apply(console, arguments);
-          }
-        },
-        performance: {
-          log: function(message) {
-            var
-              currentTime,
-              executionTime,
-              previousTime
-            ;
-            if(settings.performance) {
-              currentTime   = new Date().getTime();
-              previousTime  = time || currentTime;
-              executionTime = currentTime - previousTime;
-              time          = currentTime;
-              performance.push({
-                'Name'           : message[0],
-                'Arguments'      : [].slice.call(message, 1) || '',
-                'Element'        : element,
-                'Execution Time' : executionTime
-              });
-            }
-            clearTimeout(module.performance.timer);
-            module.performance.timer = setTimeout(module.performance.display, 500);
-          },
-          display: function() {
-            var
-              title = settings.name + ':',
-              totalTime = 0
-            ;
-            time = false;
-            clearTimeout(module.performance.timer);
-            $.each(performance, function(index, data) {
-              totalTime += data['Execution Time'];
-            });
-            title += ' ' + totalTime + 'ms';
-            if(moduleSelector) {
-              title += ' \'' + moduleSelector + '\'';
-            }
-            if($allModules.length > 1) {
-              title += ' ' + '(' + $allModules.length + ')';
-            }
-            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
-              console.groupCollapsed(title);
-              if(console.table) {
-                console.table(performance);
-              }
-              else {
-                $.each(performance, function(index, data) {
-                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
-                });
-              }
-              console.groupEnd();
-            }
-            performance = [];
-          }
-        },
-        invoke: function(query, passedArguments, context) {
-          var
-            object = instance,
-            maxDepth,
-            found,
-            response
-          ;
-          passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
-          if(typeof query == 'string' && object !== undefined) {
-            query    = query.split(/[\. ]/);
-            maxDepth = query.length - 1;
-            $.each(query, function(depth, value) {
-              var camelCaseValue = (depth != maxDepth)
-                ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
-                : query
-              ;
-              if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
-                object = object[camelCaseValue];
-              }
-              else if( object[camelCaseValue] !== undefined ) {
-                found = object[camelCaseValue];
-                return false;
-              }
-              else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
-                object = object[value];
-              }
-              else if( object[value] !== undefined ) {
-                found = object[value];
-                return false;
-              }
-              else {
-                return false;
-              }
-            });
-          }
-          if( $.isFunction( found ) ) {
-            response = found.apply(context, passedArguments);
-          }
-          else if(found !== undefined) {
-            response = found;
-          }
-          if(Array.isArray(returnedValue)) {
-            returnedValue.push(response);
-          }
-          else if(returnedValue !== undefined) {
-            returnedValue = [returnedValue, response];
-          }
-          else if(response !== undefined) {
-            returnedValue = response;
-          }
-          return found;
-        }
-      };
-      if(methodInvoked) {
-        if(instance === undefined) {
-          module.initialize();
-        }
-        module.invoke(query);
-      }
-      else {
-        if(instance !== undefined) {
-          instance.invoke('destroy');
-        }
-        module.initialize();
-      }
-
-    })
-  ;
-
-  return (returnedValue !== undefined)
-    ? returnedValue
-    : this
-  ;
-};
-
-$.fn.search.settings = {
-
-  name              : 'Search',
-  namespace         : 'search',
-
-  silent            : false,
-  debug             : false,
-  verbose           : false,
-  performance       : true,
-
-  // template to use (specified in settings.templates)
-  type              : 'standard',
-
-  // minimum characters required to search
-  minCharacters     : 1,
-
-  // whether to select first result after searching automatically
-  selectFirstResult : false,
-
-  // API config
-  apiSettings       : false,
-
-  // object to search
-  source            : false,
-
-  // Whether search should query current term on focus
-  searchOnFocus     : true,
-
-  // fields to search
-  searchFields   : [
-    'id',
-    'title',
-    'description'
-  ],
-
-  // field to display in standard results template
-  displayField   : '',
-
-  // search anywhere in value (set to 'exact' to require exact matches
-  fullTextSearch : 'exact',
-
-  // match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à", etc...)
-  ignoreDiacritics : false,
-
-  // whether to add events to prompt automatically
-  automatic      : true,
-
-  // delay before hiding menu after blur
-  hideDelay      : 0,
-
-  // delay before searching
-  searchDelay    : 200,
-
-  // maximum results returned from search
-  maxResults     : 7,
-
-  // whether to store lookups in local cache
-  cache          : true,
-
-  // whether no results errors should be shown
-  showNoResults  : true,
-
-  // preserve possible html of resultset values
-  preserveHTML   : true,
-
-  // transition settings
-  transition     : 'scale',
-  duration       : 200,
-  easing         : 'easeOutExpo',
-
-  // callbacks
-  onSelect       : false,
-  onResultsAdd   : false,
-
-  onSearchQuery  : function(query){},
-  onResults      : function(response){},
-
-  onResultsOpen  : function(){},
-  onResultsClose : function(){},
-
-  className: {
-    animating : 'animating',
-    active    : 'active',
-    empty     : 'empty',
-    focus     : 'focus',
-    hidden    : 'hidden',
-    loading   : 'loading',
-    results   : 'results',
-    pressed   : 'down'
-  },
-
-  error : {
-    source          : 'Cannot search. No source used, and Semantic API module was not included',
-    noResultsHeader : 'No Results',
-    noResults       : 'Your search returned no results',
-    logging         : 'Error in debug logging, exiting.',
-    noEndpoint      : 'No search endpoint was specified',
-    noTemplate      : 'A valid template name was not specified.',
-    oldSearchSyntax : 'searchFullText setting has been renamed fullTextSearch for consistency, please adjust your settings.',
-    serverError     : 'There was an issue querying the server.',
-    maxResults      : 'Results must be an array to use maxResults setting',
-    method          : 'The method you called is not defined.',
-    noNormalize     : '"ignoreDiacritics" setting will be ignored. Browser does not support String().normalize(). You may consider including <https://cdn.jsdelivr.net/npm/unorm@1.4.1/lib/unorm.min.js> as a polyfill.'
-  },
-
-  metadata: {
-    cache   : 'cache',
-    results : 'results',
-    result  : 'result'
-  },
-
-  regExp: {
-    escape     : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
-    beginsWith : '(?:\s|^)'
-  },
-
-  // maps api response attributes to internal representation
-  fields: {
-    categories      : 'results',     // array of categories (category view)
-    categoryName    : 'name',        // name of category (category view)
-    categoryResults : 'results',     // array of results (category view)
-    description     : 'description', // result description
-    image           : 'image',       // result image
-    price           : 'price',       // result price
-    results         : 'results',     // array of results (standard)
-    title           : 'title',       // result title
-    url             : 'url',         // result url
-    action          : 'action',      // "view more" object name
-    actionText      : 'text',        // "view more" text
-    actionURL       : 'url'          // "view more" url
-  },
-
-  selector : {
-    prompt       : '.prompt',
-    searchButton : '.search.button',
-    results      : '.results',
-    message      : '.results > .message',
-    category     : '.category',
-    result       : '.result',
-    title        : '.title, .name'
-  },
-
-  templates: {
-    escape: function(string, preserveHTML) {
-      if (preserveHTML){
-        return string;
-      }
-      var
-        badChars     = /[<>"'`]/g,
-        shouldEscape = /[&<>"'`]/,
-        escape       = {
-          "<": "&lt;",
-          ">": "&gt;",
-          '"': "&quot;",
-          "'": "&#x27;",
-          "`": "&#x60;"
-        },
-        escapedChar  = function(chr) {
-          return escape[chr];
-        }
-      ;
-      if(shouldEscape.test(string)) {
-        string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
-        return string.replace(badChars, escapedChar);
-      }
-      return string;
-    },
-    message: function(message, type, header) {
-      var
-        html = ''
-      ;
-      if(message !== undefined && type !== undefined) {
-        html +=  ''
-          + '<div class="message ' + type + '">'
-        ;
-        if(header) {
-          html += ''
-          + '<div class="header">' + header + '</div>'
-          ;
-        }
-        html += ' <div class="description">' + message + '</div>';
-        html += '</div>';
-      }
-      return html;
-    },
-    category: function(response, fields, preserveHTML) {
-      var
-        html = '',
-        escape = $.fn.search.settings.templates.escape
-      ;
-      if(response[fields.categoryResults] !== undefined) {
-
-        // each category
-        $.each(response[fields.categoryResults], function(index, category) {
-          if(category[fields.results] !== undefined && category.results.length > 0) {
-
-            html  += '<div class="category">';
-
-            if(category[fields.categoryName] !== undefined) {
-              html += '<div class="name">' + escape(category[fields.categoryName], preserveHTML) + '</div>';
-            }
-
-            // each item inside category
-            html += '<div class="results">';
-            $.each(category.results, function(index, result) {
-              if(result[fields.url]) {
-                html  += '<a class="result" href="' + result[fields.url].replace(/"/g,"") + '">';
-              }
-              else {
-                html  += '<a class="result">';
-              }
-              if(result[fields.image] !== undefined) {
-                html += ''
-                  + '<div class="image">'
-                  + ' <img src="' + result[fields.image].replace(/"/g,"") + '">'
-                  + '</div>'
-                ;
-              }
-              html += '<div class="content">';
-              if(result[fields.price] !== undefined) {
-                html += '<div class="price">' + escape(result[fields.price], preserveHTML) + '</div>';
-              }
-              if(result[fields.title] !== undefined) {
-                html += '<div class="title">' + escape(result[fields.title], preserveHTML) + '</div>';
-              }
-              if(result[fields.description] !== undefined) {
-                html += '<div class="description">' + escape(result[fields.description], preserveHTML) + '</div>';
-              }
-              html  += ''
-                + '</div>'
-              ;
-              html += '</a>';
-            });
-            html += '</div>';
-            html  += ''
-              + '</div>'
-            ;
-          }
-        });
-        if(response[fields.action]) {
-          if(fields.actionURL === false) {
-            html += ''
-            + '<div class="action">'
-            +   escape(response[fields.action][fields.actionText], preserveHTML)
-            + '</div>';
-          } else {
-            html += ''
-            + '<a href="' + response[fields.action][fields.actionURL].replace(/"/g,"") + '" class="action">'
-            +   escape(response[fields.action][fields.actionText], preserveHTML)
-            + '</a>';
-          }
-        }
-        return html;
-      }
-      return false;
-    },
-    standard: function(response, fields, preserveHTML) {
-      var
-        html = '',
-        escape = $.fn.search.settings.templates.escape
-      ;
-      if(response[fields.results] !== undefined) {
-
-        // each result
-        $.each(response[fields.results], function(index, result) {
-          if(result[fields.url]) {
-            html  += '<a class="result" href="' + result[fields.url].replace(/"/g,"") + '">';
-          }
-          else {
-            html  += '<a class="result">';
-          }
-          if(result[fields.image] !== undefined) {
-            html += ''
-              + '<div class="image">'
-              + ' <img src="' + result[fields.image].replace(/"/g,"") + '">'
-              + '</div>'
-            ;
-          }
-          html += '<div class="content">';
-          if(result[fields.price] !== undefined) {
-            html += '<div class="price">' + escape(result[fields.price], preserveHTML) + '</div>';
-          }
-          if(result[fields.title] !== undefined) {
-            html += '<div class="title">' + escape(result[fields.title], preserveHTML) + '</div>';
-          }
-          if(result[fields.description] !== undefined) {
-            html += '<div class="description">' + escape(result[fields.description], preserveHTML) + '</div>';
-          }
-          html  += ''
-            + '</div>'
-          ;
-          html += '</a>';
-        });
-        if(response[fields.action]) {
-          if(fields.actionURL === false) {
-            html += ''
-            + '<div class="action">'
-            +   escape(response[fields.action][fields.actionText], preserveHTML)
-            + '</div>';
-          } else {
-            html += ''
-            + '<a href="' + response[fields.action][fields.actionURL].replace(/"/g,"") + '" class="action">'
-            +   escape(response[fields.action][fields.actionText], preserveHTML)
-            + '</a>';
-          }
-        }
-        return html;
-      }
-      return false;
-    }
-  }
-};
-
-})( jQuery, window, document );
diff --git a/web_src/fomantic/build/fomantic.js b/web_src/fomantic/build/fomantic.js
index c903fd1633..8cc8652482 100644
--- a/web_src/fomantic/build/fomantic.js
+++ b/web_src/fomantic/build/fomantic.js
@@ -1,6 +1,5 @@
 import './components/api.js';
 import './components/dropdown.js';
 import './components/modal.js';
-import './components/search.js';
 
 // Hard-forked from Fomantic UI 2.8.7, patches are commented with "GITEA-PATCH"
diff --git a/web_src/fomantic/theme.config.less b/web_src/fomantic/theme.config.less
index 632ddce07f..8507c4af9b 100644
--- a/web_src/fomantic/theme.config.less
+++ b/web_src/fomantic/theme.config.less
@@ -44,7 +44,6 @@
 @progress   : 'default';
 @slider     : 'default';
 @rating     : 'default';
-@search     : 'default';
 @shape      : 'default';
 @sidebar    : 'default';
 @sticky     : 'default';
diff --git a/web_src/js/features/common-fetch-action.ts b/web_src/js/features/common-fetch-action.ts
index 96bc2e2adb..0f65f780ac 100644
--- a/web_src/js/features/common-fetch-action.ts
+++ b/web_src/js/features/common-fetch-action.ts
@@ -1,7 +1,7 @@
 import {GET, request} from '../modules/fetch.ts';
 import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
 import {addDelegatedEventListener, createElementFromHTML} from '../utils/dom.ts';
-import {errorMessage} from '../modules/errors.ts';
+import {errorMessage, errorName} from '../modules/errors.ts';
 import {confirmModal, createConfirmModal} from './comp/ConfirmModal.ts';
 import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {registerGlobalSelectorFunc} from '../modules/observer.ts';
@@ -138,7 +138,7 @@ async function performActionRequest(el: HTMLElement, opt: FetchActionOpts) {
     }
     await handleFetchActionError(resp);
   } catch (err) {
-    if ((err as Error).name !== 'AbortError') {
+    if (errorName(err) !== 'AbortError') {
       console.error(`Fetch action request error:`, err);
       showErrorToast(`Error: ${errorMessage(err)}`);
     }
diff --git a/web_src/js/features/comp/SearchRepoBox.ts b/web_src/js/features/comp/SearchRepoBox.ts
index c87240b67a..51227bf509 100644
--- a/web_src/js/features/comp/SearchRepoBox.ts
+++ b/web_src/js/features/comp/SearchRepoBox.ts
@@ -1,31 +1,16 @@
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
-import {htmlEscape} from '../../utils/html.ts';
+import {attachSearchBox} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 
+type RepoSearchResponse = {data: Array<{repository: {full_name: string}}>};
+
 export function initCompSearchRepoBox(el: HTMLElement) {
   const uid = el.getAttribute('data-uid');
   const exclusive = el.getAttribute('data-exclusive');
   let url = `${appSubUrl}/repo/search?q={query}&uid=${uid}`;
-  if (exclusive === 'true') {
-    url += `&exclusive=true`;
-  }
-  fomanticQuery(el).search({
-    minCharacters: 2,
-    apiSettings: {
-      url,
-      onResponse(response: any) {
-        const items = [];
-        for (const item of response.data) {
-          items.push({
-            title: htmlEscape(item.repository.full_name.split('/')[1]),
-            description: htmlEscape(item.repository.full_name),
-          });
-        }
-        return {results: items};
-      },
-    },
-    searchFields: ['full_name'],
-    showNoResults: false,
-  });
+  if (exclusive === 'true') url += `&exclusive=true`;
+  attachSearchBox(el, url, (response: RepoSearchResponse) => response.data.map((item) => ({
+    title: item.repository.full_name.split('/')[1],
+    description: item.repository.full_name,
+  })));
 }
diff --git a/web_src/js/features/comp/SearchUserBox.ts b/web_src/js/features/comp/SearchUserBox.ts
index f5680078a3..739b5c5994 100644
--- a/web_src/js/features/comp/SearchUserBox.ts
+++ b/web_src/js/features/comp/SearchUserBox.ts
@@ -1,49 +1,30 @@
-import {htmlEscape} from '../../utils/html.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {attachSearchBox, type SearchResult} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
 
+type UserSearchResponse = {data: Array<{login: string; avatar_url: string; full_name: string}>};
+
 export function initCompSearchUserBox() {
-  const searchUserBox = document.querySelector('#search-user-box');
-  if (!searchUserBox) return;
+  const box = document.querySelector<HTMLElement>('#search-user-box');
+  if (!box) return;
 
-  const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
-  const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
-  const includeOrgs = searchUserBox.getAttribute('data-include-orgs') === 'true';
-  fomanticQuery(searchUserBox).search({
-    minCharacters: 2,
-    apiSettings: {
-      url: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
-      onResponse(response: any) {
-        const resultItems = [];
-        const searchQuery = searchUserBox.querySelector('input')!.value;
-        const searchQueryUppercase = searchQuery.toUpperCase();
-        for (const item of response.data) {
-          const resultItem = {
-            title: item.login,
-            image: item.avatar_url,
-            description: htmlEscape(item.full_name),
-          };
-          if (searchQueryUppercase === item.login.toUpperCase()) {
-            resultItems.unshift(resultItem); // add the exact match to the top
-          } else {
-            resultItems.push(resultItem);
-          }
-        }
+  const allowEmailInput = box.getAttribute('data-allow-email') === 'true';
+  const allowEmailDescription = box.getAttribute('data-allow-email-description') ?? undefined;
+  const includeOrgs = box.getAttribute('data-include-orgs') === 'true';
+  const url = `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`;
 
-        if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
-          const resultItem = {
-            title: searchQuery,
-            description: allowEmailDescription,
-          };
-          resultItems.push(resultItem);
-        }
-
-        return {results: resultItems};
-      },
-    },
-    searchFields: ['login', 'full_name'],
-    showNoResults: false,
+  attachSearchBox(box, url, (response: UserSearchResponse, query) => {
+    const items: SearchResult[] = [];
+    const queryUpper = query.toUpperCase();
+    for (const item of response.data) {
+      const result: SearchResult = {title: item.login, image: item.avatar_url, description: item.full_name};
+      if (queryUpper === item.login.toUpperCase()) items.unshift(result); // exact match floats to top
+      else items.push(result);
+    }
+    if (allowEmailInput && !items.length && looksLikeEmailAddressCheck.test(query)) {
+      items.push({title: query, description: allowEmailDescription});
+    }
+    return items;
   });
 }
diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts
index f3b95178f3..f003200c3e 100644
--- a/web_src/js/features/repo-settings.ts
+++ b/web_src/js/features/repo-settings.ts
@@ -3,6 +3,7 @@ import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {attachSearchBox} from '../modules/search.ts';
 import {globMatch} from '../utils/glob.ts';
 
 const {appSubUrl} = window.config;
@@ -45,29 +46,17 @@ function initRepoSettingsCollaboration() {
   }
 }
 
-function initRepoSettingsSearchTeamBox() {
-  const searchTeamBox = document.querySelector('#search-team-box');
-  if (!searchTeamBox) return;
+type TeamSearchResponse = {data: Array<{name: string; permission: string}>};
 
-  fomanticQuery(searchTeamBox).search({
-    minCharacters: 2,
-    searchFields: ['name', 'description'],
-    showNoResults: false,
-    rawResponse: true,
-    apiSettings: {
-      url: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
-      onResponse(response: any) {
-        const items: Array<Record<string, any>> = [];
-        for (const item of response.data) {
-          items.push({
-            title: item.name,
-            description: `${item.permission} access`, // TODO: translate this string
-          });
-        }
-        return {results: items};
-      },
-    },
-  });
+function initRepoSettingsSearchTeamBox() {
+  const box = document.querySelector<HTMLElement>('#search-team-box');
+  if (!box) return;
+
+  const url = `${appSubUrl}/org/${box.getAttribute('data-org-name')}/teams/-/search?q={query}`;
+  attachSearchBox(box, url, (response: TeamSearchResponse) => response.data.map((item) => ({
+    title: item.name,
+    description: `${item.permission} access`, // TODO: translate this string
+  })));
 }
 
 function initRepoSettingsGitHook() {
diff --git a/web_src/js/modules/errors.ts b/web_src/js/modules/errors.ts
index d4fb549cfe..4b6504dc99 100644
--- a/web_src/js/modules/errors.ts
+++ b/web_src/js/modules/errors.ts
@@ -2,10 +2,16 @@
 import {html} from '../utils/html.ts';
 import type {Intent} from '../types.ts';
 
+/** Extract a message string from an unknown caught value. */
 export function errorMessage(err: unknown): string {
   return (err as Error)?.message || String(err);
 }
 
+/** Extract a name string from an unknown caught value. */
+export function errorName(err: unknown): string {
+  return (err as Error)?.name ?? '';
+}
+
 export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error', details?: string) {
   const parentContainer = document.querySelector('.page-content') ?? document.body;
   if (!parentContainer) {
diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts
new file mode 100644
index 0000000000..258d3c3c5b
--- /dev/null
+++ b/web_src/js/modules/search.ts
@@ -0,0 +1,110 @@
+import {debounce} from 'throttle-debounce';
+import {GET} from './fetch.ts';
+import {errorName} from './errors.ts';
+import {html, htmlRaw} from '../utils/html.ts';
+import {urlQueryEscape} from '../utils/url.ts';
+
+export type SearchResult = {
+  title: string;
+  description?: string;
+  image?: string;
+};
+
+function buildResultHTML(result: SearchResult): string {
+  const img = result.image ? html`<div class="image"><img src="${result.image}" alt=""></div>` : '';
+  const desc = result.description ? html`<div class="description">${result.description}</div>` : '';
+  return html`${htmlRaw(img)}<div class="content"><div class="title">${result.title}</div>${htmlRaw(desc)}</div>`;
+}
+
+function buildResultElement(result: SearchResult): HTMLElement {
+  const item = document.createElement('div');
+  item.className = 'result';
+  item.innerHTML = buildResultHTML(result);
+  return item;
+}
+
+/** Attach an API-driven autocomplete to `container`. `parse` maps the raw JSON response into the rendered result list. The selected result's title is written to the input on selection. */
+export function attachSearchBox<T = unknown>(container: HTMLElement, url: string, parse: (raw: T, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): void {
+  const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input');
+  if (!input) return;
+
+  let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
+  if (!resultsEl) {
+    resultsEl = document.createElement('div');
+    resultsEl.className = 'results';
+    container.append(resultsEl);
+  }
+  const itemResults = new Map<HTMLElement, SearchResult>();
+  let fetchController: AbortController | null = null;
+  let search: ReturnType<typeof debounce<(query: string) => Promise<void>>> | null = null;
+
+  const hide = () => {
+    search?.cancel();
+    fetchController?.abort();
+    resultsEl.style.display = 'none';
+    resultsEl.replaceChildren();
+    itemResults.clear();
+  };
+
+  const render = (results: SearchResult[]) => {
+    if (!results.length) return hide();
+    itemResults.clear();
+    resultsEl.replaceChildren(...results.map((result) => {
+      const item = buildResultElement(result);
+      itemResults.set(item, result);
+      return item;
+    }));
+    resultsEl.style.display = 'block';
+  };
+
+  const select = (item: HTMLElement) => {
+    input.value = itemResults.get(item)!.title;
+    input.dispatchEvent(new Event('change', {bubbles: true}));
+    hide();
+  };
+
+  search = debounce(200, async (query: string) => {
+    fetchController?.abort();
+    if (query.length < minCharacters) return hide();
+    const ctrl = (fetchController = new AbortController());
+    try {
+      const response = await GET(url.replaceAll('{query}', urlQueryEscape(query)), {signal: ctrl.signal});
+      if (!response.ok) return hide();
+      const results = parse(await response.json(), query);
+      // only render if the fetch wasn't aborted (e.g. by hide()) and the input still matches
+      if (!ctrl.signal.aborted && input.value === query) render(results);
+    } catch (err) {
+      if (errorName(err) !== 'AbortError') hide();
+    }
+  });
+
+  input.addEventListener('input', () => search(input.value));
+  input.addEventListener('focus', () => { if (itemResults.size) resultsEl.style.display = 'block'; });
+  input.addEventListener('blur', () => setTimeout(hide, 150)); // deferred so a result mousedown can land first
+  input.addEventListener('keydown', (event) => {
+    const resultEls = Array.from(resultsEl.querySelectorAll<HTMLElement>('.result'));
+    if (!resultEls.length) return;
+    const index = resultEls.findIndex((item) => item.classList.contains('active'));
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      resultEls[index]?.classList.remove('active');
+      const next = event.key === 'ArrowDown' ? (index + 1) % resultEls.length : index <= 0 ? resultEls.length - 1 : index - 1;
+      resultEls[next].classList.add('active');
+    } else if (event.key === 'Enter' && index >= 0) {
+      event.preventDefault();
+      select(resultEls[index]);
+    } else if (event.key === 'Escape') {
+      hide();
+    }
+  });
+  // mousedown fires before input blur so the selection registers before blur-hide kicks in
+  resultsEl.addEventListener('mousedown', (event) => {
+    const target = (event.target as HTMLElement).closest<HTMLElement>('.result');
+    if (!target) return;
+    event.preventDefault();
+    select(target);
+  });
+  document.addEventListener('click', (event) => {
+    if (!container.contains(event.target as Node)) hide();
+  });
+}