Styling Joomla’s Smart Search Results to Look Like AZDirectory Output

The AZDirectory module does not include a search feature. However, leveraging Joomla’s Smart Search capability and the flexibility of the AZDirectory module, a tailored search feature styled to look like the module’s output is possible with some careful configuration and a couple of component layout overrides.

Check out the demonstration.

To achieve this functionality, follow these steps after successfully logging into the Joomla administrative area:

  1. Ensure the Smart Search – Contacts plugin in enabled.
    Go to System. Under “Manage”, click “Plugins”. Search for “Smart Search” and ensure “Smart Search – Contacts” is enabled.
    Screenshot of Plugins page showing the Smart Search - Contacts plugin enabled.
  2. Index the contacts.
    Go to Components > Smart Search > Index. If this is your first time using Smart Search, click the “Start the indexer” button. If you’ve already indexed content, click the “Index” button to include your contacts.
  3. Create a Smart Search filter specifically for contacts.
    The power of Joomla’s Smart Search feature is the ability to create tailored filters specific to your needs. Go to Components > Smart Search > Filters. If this is your first time creating a filter, click the “Add a filter” button. If you’ve already created a filter, click the “New” button.
  4. Configure your filter.
    Give the filter a “Title” and toggle just the “Contacts” checkbox under “Search by Type”. You can fine tune your filter by “Category”, “Language”, “Region”, “Country”, etc. Save & Close.
    Screenshot of Filter page showing Contacts checked.
  5. Create a Smart Search menu item.
    Go to Menus and add a new menu item to your appropriate menu. Give the menu item a title and select Smart Search > Search as the Menu Item Type. Select your previously configured filter from the Filter dropdown. Take the time to carefully review the settings under the “Options” and “Advanced” tab, as there are many configuration and display options for the appearance of the search results. Save & Close.
    Screenshot of menu item page showing the correct Menu Item Type and Filter selected.
  6. Create a dedicated instance of the AZDirectory module.
    Go to Content > Site Modules and create a new AZDirectory module. Configure the module to your needs, but explicitly set “Default Letter” to “None” and “Alphabet Listing/Dropdown” to “No”. This hides the module but loads the necessary JavaScript and stylesheets to replicate the display of the module output for the smart search results. Under “Menu Assignment”, assign the module to the previously created Smart Search menu item. Save & Close.
    Screenshot of AZDirectory module options showing Alphabet Listing/Dropdown set to No.
  7. Upload the com_finder layout overrides within your template’s directory structure.
    Download the com_finder layout override ZIP package.
SHA256 checksum

dcb09ea6a505a9408269ea1e8a146ff94c3c447e40f781b3d0110b8715c4349f

SHA384 checksum

2127301f252acbf9f19be5b526c1c876a212e3f1affd3ef3caaa7023a85c4b6180dd41e9c86f5448c1b38b53c7343f33

SHA512 checksum

b6b00e68ffa8ddda1a1e8a09202ea2c9db960e16edcb5e895d67aa41269c8bc23c41a0c03131cb433e1c1cf44b4862122fa5505759fba9ee6d8401e2dc4c894f

The package contains the following directory structure:

/com_finder
  /search
    default_contact.php
    default_results.php

Per the component layout overrides instructions, upload the two PHP files to:

/templates
  /[your template]
    /html
      /com_finder (this directory matches the component directory name)
        /search (this directory matches the view directory name)
          default_contact.php
          default_results.php

Following these steps will provide a robust search capability with the same display, functionality, and flexibility of the AZDirectory module. If you like the AZDirectory module, please consider leaving a review at the Joomla Extension Directory.