Search specific fields based on dropdown result

Ask the community
,
1

Hi guys,

I currently have a working search bar which links to a result page with results populated in a repeater. I would like to add a dropdown to the search which will consist of field names from my dataset and searches will then only be for data within the specific field of the dataset.

As an example, if I had a dataset with fields ‘Number’, ‘Street’, ‘City’ I would populate the dropdown with these fields and then if someone selected ‘Number’ in the dropdown list and typed 17 in the search bar it would search within the ‘Number’ field only and only show results for any properties that are number 17. If the same search was conducted but the dropdown was selected as ‘Street’, then the search would return no results.

Is this possible as I’m struggling to find resources which seem to put these 2 features together (I’ve found plenty that have the search bar and dropdown working as separate entities)?

Thanks

2

Very possible. Instead of only the value argument of the setFilter statement being a variable, both the field and the value would be a variable. Something like this:

let searchValue = $w("#searchBar").value;
let fieldName = $w("#fieldDropdown").value;
 $w('#dataset1').setFilter(wixData.filter()
     .eq(fieldName, searchValue)
  )
  .then(() => {
      console.log("filter set");
  })
3

Hi Anthony,

Thanks very much for your response.
I have managed to generate a dropdown filter to the search results thanks to your help. However, I have only managed to do so on the Results page and not on the search page.

My setup for the search function is that the user will search from the home page and will then be directed to a results page (where the repeater is located) to see their search results. Using the following code I have been able to set it up to allow a user to search from the home page and then use the dropdown in the results page to filter their results:

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))

        .limit(12)

 
 

 
        .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();
        $w('#button8').hide();
 
    }
 
    }
        )}
 



export function dropdown1_change(event) {
    dropdown1Change();
 //Add your code for this event here: 
}

function dropdown1Change () {
 let searchValue = $w("#searchBar").value;
let fieldName = $w("#dropdown1").value;
 $w('#Shunters').setFilter(wixData.filter()
     .contains(fieldName, searchValue)
  )

  .then(() => {
      console.log("filter set");
  })

if (fieldName === 'All'){
    $w('#Shunters').setFilter(wixData.filter());
} else{
    $w('#Shunters').setFilter(wixData.filter().contains(fieldName, searchValue));
}
}

This is not the end of the world and would still work reasonably well but I would like the user to select from a dropdown on the home page search and then the relevant filter to be in place when they are directed to the results page.
Fore reference the code in my home page for the search bar is:

import { local } from 'wix-storage';

import wixLocation from 'wix-location';

$w.onReady(function () {

});

export function searchButton_click_1(event) {

 let word = $w('#testsearchBar').value;
 
    local.setItem("searchWord", word);

    wixLocation.to('/results2');

}

I just can’t seem to figure where to incorporate code for the dropdown filter in this code?!?

Also, I have added this code to the bottom of the code in my results page

if (fieldName === 'All'){    $w('#Shunters').setFilter(wixData.filter());} else{    $w('#Shunters').setFilter(wixData.filter().contains(fieldName, searchValue));}

As I would like an option in the dropdown menu for the user to select ‘All’ which will search all fields in the dropdown menu. This doesn’t seem to work either so if you could assist with that as well, that would be great :slight_smile:

Again, thanks for your help

Matt