Search - Bootstrap 4

This Joomla 4 override allows you to customize the search bar of the Joomla's mod_finder module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_finder
 * @author  	web-eau.net
 * @copyright   (C) 2011 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;
use Joomla\Module\Finder\Site\Helper\FinderHelper;

// Load the smart search component language file.
$lang = $app->getLanguage();
$lang->load('com_finder', JPATH_SITE);

$input = '<input type="text" name="q" id="mod-finder-searchword' . $module->id . '" class="p-3 shadow-4 js-finder-search-query form-control" value="' . htmlspecialchars($app->input->get('q', '', 'string'), ENT_COMPAT, 'UTF-8') . '"'
	. ' placeholder="Search in the Joomla knowledge base..." size="150" aria-label="Search" />';

$showLabel  = $params->get('show_label', 1);
$labelClass = (!$showLabel ? 'visually-hidden ' : '') . 'finder';
$label      = '<label for="mod-finder-searchword' . $module->id . '" class="text-center text-whit pt-4 d-none d-sm-block h4 ' . $labelClass . '">' . $params->get('alt_label', Text::_('JSEARCH_FILTER_SUBMIT')) . '</label>';

$output = '';

if ($params->get('show_button', 0))
{
	$output .= $label;
	$output .= '<div class="mod-finder__search input-group">';
	$output .= $input;
	$output .= '<button class="btn btn-primary" type="submit"><span class="icon-search icon-black" aria-hidden="true"></span> ' . Text::_('JSEARCH_FILTER_SUBMIT') . '</button>';
	$output .= '</div>';
}
else
{
	$output .= $label;
	$output .= $input;
}

Text::script('MOD_FINDER_SEARCH_VALUE', true);

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->getRegistry()->addExtensionRegistryFile('com_finder');

/*
 * This segment of code sets up the autocompleter.
 */
if ($params->get('show_autosuggest', 1))
{
	$wa->usePreset('awesomplete');
	$app->getDocument()->addScriptOptions('finder-search', array('url' => Route::_('index.php?option=com_finder&task=suggestions.suggest&format=json&tmpl=component')));
}

$wa->useScript('com_finder.finder');

?>

<form class="mx-auto form-control-lg w-75 mod-finder js-finder-searchform form-search" action="<?php echo Route::_($route); ?>" method="get" role="search">
	<?php echo $output; ?>

	<?php $show_advanced = $params->get('show_advanced', 0); ?>
	<?php if ($show_advanced == 2) : ?>
		<br>
		<a href="<?php echo Route::_($route); ?>" class="mod-finder__advanced-link"><?php echo Text::_('COM_FINDER_ADVANCED_SEARCH'); ?></a>
	<?php elseif ($show_advanced == 1) : ?>
		<div class="mod-finder__advanced js-finder-advanced">
			<?php echo HTMLHelper::_('filter.select', $query, $params); ?>
		</div>
	<?php endif; ?>
	<?php echo FinderHelper::getGetFields($route, (int) $params->get('set_itemid', 0)); ?>
</form>

This Joomla 3 override allows you to customize the search bar of the Joomla's mod_search module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	defined ('_JEXEC') or die();
?>
<div class="container">
	<div class="row justify-content-center">
		<div class="col-12 col-md-10 col-lg-8">
			<div class="search">
				
				
				<form class="card card-sm" action="<?php echo JRoute::_('index.php'); ?>" method="post">
					<div class="card-body row no-gutters align-items-center">
						
						<?php
							
							$input  = '<div class="mt-1 col-auto"><i class="fa fa-search fa-2x h4 text-body"></i></div><div class="col"><input name="searchword" id="mod-search-searchword' . $module->id . '" class="form-control-lg form-control-borderless form-control" type="search" placeholder="' . $text . '"></div>';
							$output = '';
							
							
							if ($button) :
							if ($imagebutton) :
							$btn_output = '<div class="col-auto"><i class="fa fa-search fa-2x h4 text-body"></i></div><div class="col"><input type="image" alt="' . $button_text . '" class="btn btn-primary" src="' . $img . '" onclick="this.form.searchword.focus();"></div>';
							else :
							$btn_output = '<button class="btn btn-lg btn-success" onclick="this.form.searchword.focus();">' . $button_text . '</button>';
							endif;
							
							$output .= '<div class="input-group">';
							$output .= $input;
							$output .= '<div class="col-auto"><span class="input-group-btn">';
							$output .= $btn_output;
							$output .= '</span></div>';
							$output .= '</div>';
							else :
							$output .= $input;
							endif;
							
							echo $output;
						?>
						<input type="hidden" name="task" value="search">
						<input type="hidden" name="option" value="com_search">
						<input type="hidden" name="Itemid" value="<?php echo $mitemid; ?>">
					</div>
				</form>
				
			</div>
		</div>
	</div>
</div>

CSS

.form-control-borderless {
    border: none;
}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
    border: none;
    outline: none;
    box-shadow: none;
}