Coding "no results" text when search bar populates no results in a repeater

[Stephanie_Hoempler]

My website has a search bar pulls data from a CMS collection, and I am trying to code a “No results” text to appear when there are no matching results to a user’s search. Can anyone help? I have tried a couple of solutions that I cannot seem to get to work.

Here is my code:

import wixData from ‘wix-data’;

$w.onReady(function () {

$w("#certificationRepeater").onItemReady(($item, itemData) => {
    $item("#firstname").text = itemData.firstname;
    $item("#lastname").text = itemData.lastname;
    $item("#testid").text = itemData.testid;
    $item("#completiondate").text = itemData.completiondate;
    $item("#id").text = itemData._id;
})

async function search() {
    const query = $w("#searchQueryInput").value;

    const firstnameQuery = wixData.query("certificationdirectoryData").contains("firstname", query);
    const lastnameQuery = wixData.query("certificationdirectoryData").contains("lastname", query);
    const testidQuery = wixData.query("certificationdirectoryData").contains("testid", query);

    const certificationdirectoryDataQueryResult = await firstnameQuery
        .or(lastnameQuery)
        .or(testidQuery)
        .find()

    const certificationdirectoryData = certificationdirectoryDataQueryResult.items;
    $w("#certificationRepeater").data = certificationdirectoryData;
    $w("#certificationRepeater").expand();
}

$w("#certificationsearchButton").onClick(search);
});

[thomasj]

You can accomplish this by checking the length property of the array returned by the query.

Based on your provided code you can use:

certificationdirectoryData.length

You can hide the error message by default and if this value is equal to 0 after a query (when the search button’s onClick event handler is triggered) you can then show the Text Element using .show()