Getting no results from search when nothing entered into search bar

Hi folks,

I have a functioning search bar in my home page which throws up results in the form of repeaters thanks to this code:

import { local } from 'wix-storage';

import wixData from 'wix-data';

$w.onReady(function () {

var sameWord = local.getItem("searchWord");

$w("#searchBar").value = sameWord;

$w("#searchBar").placeholder = sameWord;

$w('#Class01'),$w('#Class02'),$w('#Class03').onReady(function () {

    search(); 
 
});

});

export function vectorImage1_click_1() {

    search();

}

function search() {

    wixData.query('Class01')
 
    .contains('number', $w('#searchBar').value)
 
    .or(wixData.query('Class01').contains('operator',$w('#searchBar').value))

    .or(wixData.query('Class01').contains('livery',$w('#searchBar').value))

 
        .find()

        .then(res => {

        $w('#repeater1').data = res.items;
 

 
 

    wixData.query('02')
 
    .contains('number', $w('#searchBar').value)
 
    .or(wixData.query('02').contains('operator',$w('#searchBar').value))

    .or(wixData.query('02').contains('livery',$w('#searchBar').value))

        .find()

        .then(res => {
 
        $w('#repeater2').data = res.items;
 
 
 
    wixData.query('03')
 
    .contains('number', $w('#searchBar').value)
 
    .or(wixData.query('03').contains('operator',$w('#searchBar').value))

    .or(wixData.query('03').contains('livery',$w('#searchBar').value))

        .find()

        .then(res => {

        $w('#repeater3').data = res.items;
 
 
 
 
    });
        });
 
        });
 
 
 
}

The only slight issue I have is that presently if I enter no text into the search bar and click the search button, it takes me to the results page and shows all of the repeaters. Is it possible, in this situation, that either of the below things could happen:

  1. Clicking the search button does nothing if there is no text in the search bar?
    OR
  2. No information appears in the repeaters on the results page if the search button is clicked with no text in the search bar?

Thanks in advance

Hello mattja19,

perhaps this will work for you, not tested!

import { local } from 'wix-storage';
import wixData from 'wix-data';

$w.onReady(function () {
 var sameWord = local.getItem("searchWord");
    $w("#searchBar").value = sameWord;
    $w("#searchBar").placeholder = sameWord;
    $w('#Class01'),$w('#Class02'),$w('#Class03').onReady(function () {
 if ($w('#searchBar').value!=0) {search();}
 else {console.error("No search-term entered!")} 
    });
});

export function vectorImage1_click_1() {
 if ($w('#searchBar').value!=0) {search();}
 else {console.error("No search-term entered!")}
}

function search() {
    wixData.query('Class01')
    .contains('number', $w('#searchBar').value)
    .or(wixData.query('Class01').contains('operator',$w('#searchBar').value))
    .or(wixData.query('Class01').contains('livery',$w('#searchBar').value))
    .find()
    .then(res => {
        $w('#repeater1').data = res.items;
        wixData.query('02')
        .contains('number', $w('#searchBar').value)
        .or(wixData.query('02').contains('operator',$w('#searchBar').value))
        .or(wixData.query('02').contains('livery',$w('#searchBar').value))
        .find()
        .then(res => {
            $w('#repeater2').data = res.items;
            wixData.query('03')
            .contains('number', $w('#searchBar').value)
            .or(wixData.query('03').contains('operator',$w('#searchBar').value))
            .or(wixData.query('03').contains('livery',$w('#searchBar').value))
            .find()
            .then(res => {
                $w('#repeater3').data = res.items;
            });
        });
    }); 
}

Hi russian-dima,

Appreciate your efforts in coming up with this possible solution. Unfortunately, it didn’t have any impact on changing the outcome when clicking search with nothing entered into the search bar.

Where you used

.value!=0)

I tried to change this to see if it had any impact using the below examples:

.value!==0)
.value!==null)

but again, neither of these alternatives worked either unfortunately.

Regards

Matt

Hi :raised_hand_with_fingers_splayed:

Take a look at my answer here .

Hi Ahmad,

Thanks for the link.
I have used your code from that thread but I am still not able to get a no result on blank searches. Still showing all data from the dataset when I conduct a blank search at the moment based on the following code:

import { local } from 'wix-storage';

import wixData from 'wix-data';

$w.onReady(function () {

var sameWord = local.getItem("searchWord");

$w("#searchBar").value = sameWord;

$w("#searchBar").placeholder = sameWord;

$w('#Shunters').onReady(function ()  {

    search(); 
 
});

if ($w('#searchBar').value !== undefined) {search();}
 else {console.error("No search-term entered!")} 
    });



export function searchButton_click_1() {

    search();

    }


function search() {
 

    wixData.query('Shunters')
 
    .contains('number', $w('#searchBar').value)
    .or(wixData.query('Shunters').contains('previousNumber',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('operator',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('livery',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('name',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('depot',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('status',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('class1',$w('#searchBar').value))

 
        .find()

        .then(res => {

        $w('#repeater1').data = res.items;
 

 
 

 
        });
 
}

For reference also, I tried

if ($w('#searchBar').value !== '')

as an alternative and this also failed!

Thanks

Matt

Hi :raised_hand_with_fingers_splayed:

You can do this by checking whether the search bar is empty or not before firing the query, here’s how:

function search() {
    if ($w('#searchBar').value.length !== 0) {
        // Run your query here
    } else {
        $w('#repeater1').data = []; // Resetting data
        $w('#noResultMessage').text = 'No Results Found!';
    }
}

Hope this helps~!
Ahmad

Hi Ahmad,

Once again, thanks very much for your efforts in assisting me - it really is appreciated.

I am sure this will be like music to your ears but I am pleased to advise that I have reached a solution on this, thanks to your assistance. I did have to adapt your code a little bit with regards to ensuring the ‘No Results Found!’ message was shown at the correct time with lines for show and hide as shown in the full coding below:

import { local } from 'wix-storage';

import wixData from 'wix-data';

$w.onReady(function () {

var sameWord = local.getItem("searchWord");

$w("#searchBar").value = sameWord;

$w("#searchBar").placeholder = sameWord;

$w('#Shunters').onReady(function ()  {

    search(); 
 
});


    });



export function searchButton_click_1() {

    search();

    }


function search() {
 
        wixData.query('Shunters')

 
 
    .contains('number', $w('#searchBar').value)
    .or(wixData.query('Shunters').contains('previousNumber',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('operator',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('livery',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('name',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('depot',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('status',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('class1',$w('#searchBar').value))

 
 

 
        .find()

        .then(res => {
 

        $w('#repeater1').data = res.items;
        $w('#text99').hide();

 if ($w('#searchBar').value.length !== 0) {
 
            wixData.query('Shunters')

 
 
    .contains('number', $w('#searchBar').value)
    .or(wixData.query('Shunters').contains('previousNumber',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('operator',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('livery',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('name',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('depot',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('status',$w('#searchBar').value))
    .or(wixData.query('Shunters').contains('class1',$w('#searchBar').value))

        } else {
        $w('#repeater1').data = []; // Resetting data
        $w('#text99').text = 'No Results Found!';
        $w('#text99').show();
 
    }
        });
}


If there is anything that can improve this code then I am happy to listen and learn but I am just relieved that the search feature is now doing what I want it to do :slight_smile:

There does remain one slight issue with the results page and that revolves around the Pagination bar I have added. With regards to this issue, when I conduct a blank search the Pagination bar remains and shows all pages for all items in the dataset where I would want it to be there but show just 1 of 1 pages not 1 of 14 as it currently does. I have posted this as a separate question already here

https://www.wix.com/corvid/forum/community-discussion/pagination-on-search-results-page?origin=member_posts_page

If you can offer any advise on this, that would be great :slight_smile:

Thanks again

Matt

Ahmad,

For reference I have solved the issue of all pages of the dataset showing in the pagination when a blank search is conducted by changing it to a ‘Show More’ button and and adding this code:

$w('#button8').hide();

So when a blank search is conducted the ‘Show More’ button is hidden.

The greater issue of pagination / show more button showing all data in the dataset instead of just the data relating to the search conducted remains though as per the detail in the thread I linked to you in the previous thread but I think the problem relating to this thread is resolved - thanks so much :slight_smile:

Matt

All of these methods are incorrect, it’s important to know what each one means.

.value!=0)

When comparing values, we use the triple equal (===) for equal, and the exclamation mark with double equal signs so say NOT equal to (!==), so the above code will return a syntax error.

This one down below means that the value in the input field is not equal to 0, which is a number.

.value!==0)

Finally, the last one, value not equal to null, all input fields has a type, regular input fields has the type of string, not null, and phone numbers or numbers in general has a type of Number, so the null won’t work.

.value!==null

What you need to use for Strings is checking how many charterer are there in the input field like this.

.value.length !== 0
// Or
.value !== ''

And for number input fields, you can check the length of characters as the Strings, if you want to check if it’s empty, or equal to 0 if you want to know the value of the number.

.value.length !== 0
// Or
.value !== 0

Hope this helped~!
Ahmad