Search database from using dropdown element and by location in database

jarrett-schweim · November 18, 2022, 4:17am

Hi! I am working on a website where you can create a profile and add specializations, sport, as well as a location (City, State) to your profile. All of that information goes into a dataset. The specializations are Tags in the database, and the location is in Field Type: Address in the database.

On the search profile page, I have two dropdown boxes and one search by location Address Input Box. Along with a Search Button, Reset Search Button, and a Repeater Box The Repeater has all of the individual profiles loaded in there with the persons Name, Profile Picture, Location, Area of specialization and, Sport Specialization.

When I attempt to connect the data to filter the repeater, there is nothing that occurs. Does anyone have any similar situations with attempting to search for “Tags” as well as “Address”? or Coding Ideas?

I get 2 errors on my code, which I have highlighted. The first error is ‘Expected 1 Arguments, But got 2’. And the 2nd error I got was ‘Identifier Expected’. Here is my current code below:

import wixData from ‘wix-data’;
$w(‘#resetButton’)

$w.onReady(function () {

});

export function searchButton_click(event) {
search;
}

function search() {

wixData.query(“Items1”)
.contains(“areasOfSpecialization”, String($w(‘#areaOfSpecializationDropdown’).value))
.and(wixData.query(“Items1”).contains(“sportSpecificSpecialization”, String($w(‘#sportCoachSpecializationDropdown’).value)))
.and(wixData.query(“Items1”).contains(“locationCityState”, $w(‘#addressInput2’).value.toString())

    .find() 
    .then(results => { 
        $w('#repeater2').data = results.items; 
    }) 
    $w('#resetButton').show(); 
    $w('#resetButton').enable(); 
    $w('#searchButton').hide()

}

export function resetButton_click(event) {
$w(‘#dataset1’).setFilter(wixData.filter());
$w(‘#areaOfSpecializationDropdown’).value = undefined;
$w(‘#sportCoachSpecializationDropdown’).value = undefined;
$w(‘#addressInput2’). = undefined;
$w(‘#searchButton’).show();
$w(‘#searchButton’).enable();
$w(‘#resetButton’).hide();
}

jarrett-schweim · November 27, 2022, 4:29am

There are now no errors in the coding. I was missing a set of () on the last string, and added ,value to take away the error code with the ‘=’.

The problem I am running into now is the page loads with the repeater and all of the profiles. It does not allow me to narrow it down based upon location, area of specialization or sport coach specialization. I enter the location, and select form my two dropdown elements and hit search, and all of the profiles remain.

Does anyone have an idea for this? Or is this not enough information for you?

Thank you!

CODE-NINJA · November 27, 2022, 1:24pm

Where is the rest of your code, related to your repeater ?

$w.onReady(function () {
    $w('#searchButton').onClick(()=>{{search();});   
});


function search() {
    let myQuery = wixData.query("Items1");
    myQuery.contains("areasOfSpecialization", String($w('#areaOfSpecializationDropdown').value));
    myQuery.contains("sportSpecificSpecialization", String($w('#sportCoachSpecializationDropdown').value));
    myQuery.contains("locationCityState", $w('#addressInput2').value.toString())
            
    myQuery.find().then(results => {
        $w('#repeater2').data = []; //little RESET ?
        $w('#repeater2').data = results.items;
    })
    $w('#resetButton').show();
    $w('#resetButton').enable();
    $w('#searchButton').hide()
}

$w('#repeater2').onItemReady(($item, itemData, index)=>{
	console.log("Index: ", index);
	console.log("Item-Data: ", itemData);
});

Or did you use a DATASET and connected your repeater with it?
So if you expect that this will work - → IT WON’T !!!

jarrett-schweim · November 28, 2022, 4:00am

I used a DATASET. should I remove the dataset and just do the wixData.query? Would this make it possible? Or am I on the completely wrong track???

CODE-NINJA · November 28, 2022, 11:51am

There are several different ways of how to connect repeater in your project.

Read this 2 possibilities…

When repeater is connected to a DATASET…

$w.onReady( function () {
  $w("#repeatedContainer").onClick( (event) => {
    let $item = $w.at(event.context);
    let clickedItemData = $item("#myDataset").getCurrentItem();
  } );
} );

When repeater is populated by setting its data property…

$w.onReady( function () {
  $w("#repeatedContainer").onClick( (event) => {
    const data = $w("#myRepeater").data;
    let clickedItemData = data.find(item => item._id === event.context.itemId);
  } );
} );

When working with Wix-Data, there are aslo other possibilities of how to work with a repeater…

$w.onReady( function () {
   let repData = [
     {"id":"001", "title":"Mister", "name":"Mr-X"},
     {"id":"002", "title":"Miss", "name":"Mrs-Y"},
   ];

   $w("#repeater1").data = repData;

  $w("#repeater1").onItemReady(($item, itemData, index) => {
    $item("#myElementInsideRepeater").onClick(()=>{
      let clickedItemData = itemData;
      console.log("ITEM_DATA: ", clickedItemData);
      console.log("Index: ", index);
    });
  });
});

jarrett-schweim · November 30, 2022, 3:27pm

Thank you very much for your response. I’m having difficulty with this coding. When I load the page, All of the profiles in my database load, and it is not filtering by location. On Each Profile in the Repeater it has a Profile Picture, Name, Location(City, State), Areas of Specialization, and Sport Coach Specialization. These are check box options when the person creates their profile.
On the Profile Search page, I have the search boy location as an address input, and then two selections as a dropdown menu, where the individual can select from one of 7 options on the Area of Specialization Dropdown, and one of 14 options on the Sport Coach Specialization Dropdown. And then a Search Button and a Reset Button.

Here is the code, and it does not show any errors on the developer except for the onClick in the Repeater. is says “Property ‘onClick’ does not exist on type ‘Repeater’”.:

CODE-NINJA · November 30, 2022, 3:39pm

Please do not show code as a pic. I don’t think your helper is happy about to RETYPE all the shown code from a pic losing time for nothing.

Always show CODE in a nice formated and good looking - - → CODE-BLOCK.
You have the CODE-BLOCK-ELEMENT in the options of this Velo-Forum-Editor.

jarrett-schweim · November 30, 2022, 7:22pm

My apologies!! Does this help?

import wixData from ‘wix-data’;

$w.onReady(function () {
$w(‘#searchButton’).onClick(()=>{{search();};
});

$w.onReady( function () {
$w(‘#repeater2’).onClick( (event) => {
const data = $w(‘#repeater2’).data;
let clickedItemData = data.find(item => item._id ===
event.context.itemId);
});
})

function search() {
let myQuery = wixData.query(“Items1”);
myQuery.contains(“areasOfSpecialization”, String($w(‘#dropdown1’).value));
myQuery.contains(“sportSpecificSpecialization”, String($w(‘#dropdown2’).value));
myQuery.contains(“locationCityState”, $w(‘#addressInput2’).value.toString())

myQuery.find().then(results => { 
    $w('#repeater2').data = []; //little RESET ? 
    $w('#repeater2').data = results.items; 
}) 
$w('#resetButton').show(); 
$w('#resetButton').enable(); 
$w('#searchButton').enable()

}

$w(‘#repeater2’).onItemReady(($item, itemData,index)=>{
console.log("Index: ", index);
console.log("Item-Data: ", itemData);
});

CODE-NINJA · November 30, 2022, 10:56pm

This is an example how it could look like without usage of dataset.

import wixData from 'wix-data';

let DATABASE = "ENTER_YOUR DB-ID-HERE"

$w.onReady(function() {
    $w('#searchButton').onClick(async()=>{
        let results = await search();
        $w('#repeater2').data = [];
        $w('#repeater2').data = results;
    });

    $w('#repeater2').onItemReady(($item, itemData,index)=>{
        console.log("Index: ", index);
        console.log("Item-Data: ", itemData);
        console.log("Title: ", itemData.title);
    });
});



function search() {console.log("Search running...");
    let myQuery = wixData.query(DATABASE);
    if($w('#dropdown1').value)      {
	myQuery.contains("areasOfSpecialization", String($w('#dropdown1').value));
   }
    if($w('#dropdown2').value)      {
	myQuery.contains("sportSpecificSpecialization", String($w('#dropdown2').value));
   }
    if($w('#addressInput2').value)  {
	myQuery.contains("locationCityState", $w('#addressInput2').value.toString());
   }
            
    myQuery.find()
    .then(results => {return(results.items);})
    .catch((err)=>{console.log(err);});
    $w('#resetButton').show();
    $w('#resetButton').enable();
    $w('#searchButton').enable();
}

Take a look onto console, what do you get ?

jarrett-schweim · December 1, 2022, 2:27pm

Good morning,

Thank you for this! I have used this code and entered the Database Code as “Items1”

There is a Repeater error code that comes up on line 9:

it says “Type ‘void’ is not assignable to type ‘any’. It’s recommended you use new variable, such as “let newVar = …” to make sure that all code completion work correctly.” I have added this code to line 9 and my results continue to be the same.

I see the repeater when I go into preview mode and then when I search anything, the repeater disappears.

Here’s how I entered the code:

import wixData from ‘wix-data’;

let DATABASE = “Items1”

$w.onReady(function() {
$w(‘#searchButton’).onClick(async()=>{
let results = await search();
$w(‘#repeater2’).data = ;
let newVar = results
});

$w('#repeater2').onItemReady(($item, itemData,index)=>{ 
    console.log("Index: ", index); 
    console.log("Item-Data: ", itemData); 
    console.log("Title: ", itemData.title); 
});

});
;

myQuery.find() 
.then(results => {return(results.items);}) 
.catch((err)=>{console.log(err);}); 
$w('#resetButton').show(); 
$w('#resetButton').enable(); 
$w('#searchButton').enable();

}

There were no errors in the code on Wix, but when I went to preview mode and selected any options and hit the Search Button, the repeater box disappeared when the page loaded. All that was left was the Location Bar, the two dropdown menus and the Search and Reset Buttons.

A Majority of the website is done through Dataset connections up to this point. Do you have an idea how to run this page off of a Dataset?

Thank you for your continued help with a solution for this problem!!

CODE-NINJA · December 4, 2022, 11:31pm

Normaly this should work…

import wixData from 'wix-data';

let DATABASE = "Items1"; //defining the DB-ID

$w.onReady(function() {console.log("dataset ready");
    $w('#searchButton').onClick(async()=>{
        console.log("clicked");
        $w('#repeater2').data = [];
        let res = await search(); 
        console.log("RES: ", res);
     //CHECK CONSOLE-LOG for RESULTS, what do you get?
        $w('#repeater2').data = res.items;
    });

    $w('#repeater2').onItemReady(($item, itemData,index)=>{
        console.log("Index: ", index);
        console.log("Item-Data: ", itemData);
        console.log("Title: ", itemData.title);
        // CHECK here again the CONSOLE !!!
        // What do you get for INDEX ?
        // What do you get for itemData?
        // What do you get for TITLE ?

// You will get output, only if you made no mistakes in the green-marked code-line and if you get some results in the console, on the orange marked codeline.
    });
});
 
function search() {console.log("Search running...");
    let myQuery = wixData.query(DATABASE);
    if($w('#dropdown1').value)      {
        myQuery.contains("areasOfSpecialization", String($w('#dropdown1').value));
    }
    if($w('#dropdown2').value)      {
        myQuery.contains("sportSpecificSpecialization", String($w('#dropdown2').value));
    }
    if($w('#addressInput2').value)  {
        myQuery.contains("locationCityState", $w('#addressInput2').value.toString());
    }      
    myQuery.find()
    .then(results=>{return(results);})
    .catch((err)=>{console.log(err);});
    $w('#resetButton').show();
    $w('#resetButton').enable();
    $w('#searchButton').enable();
}

jarrett-schweim · December 5, 2022, 2:40am

Thank you Velo-Ninja!

The only error in the code I am getting is on line 12 with the res.items

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

The error that comes up is "Property ‘items’ does not exist on type ‘void’.

When i run the code and click on any of the dropdowns and hit search, the Repeater disappears again.

jarrett-schweim · December 5, 2022, 2:43am

I also ran the Console log and it shows there is no log to display.

CODE-NINJA · December 5, 2022, 9:48pm

Ok, i think i forgot a very little part in my provided code…

check this codelines and modify it like shown below…

   ...
   ...
   ...
   }
  myQuery.find()
  return myQuery.find()
  .then((results)=>{console.log(results);
     return(results);})
  .catch((err)=>{console.log(err);});
  $w('#resetButton').show();
  $w('#resetButton').enable();
  $w('#searchButton').enable();
}

I think a “return” was missing.

jarrett-schweim · December 6, 2022, 4:19am

Good evening Velo-Ninja,

Thank you for your continued feedback!! The Repeater stays on the page now when I run a search in preview mode. There is no filtering of any of the profiles that occurs. All profiles load on there when the page loads, but none are filtered based upon the search results.

I am still getting the error on line 12 of the code with “items”. Now it is saying: “Property ‘items’ does not exist on type ‘void l WixDataQueryResult’. Property ‘items’ does not exist on type ‘void’”.

The other thing I notice is the last three lines of code show up in a lighter color when entered.

Here is the entire code:

import wixData from ‘wix-data’;

let DATABASE = “Items1”; //defining the DB-ID

$w.onReady(function() {console.log(“dataset ready”);
$w(‘#searchButton’).onClick(async()=>{
console.log(“clicked”);
$w(‘#repeater2’).data = ;
let res = await search();
console.log("RES: ", res);

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

$w('#repeater2').onItemReady(($item, itemData,index)=>{ 
    console.log("Index: ", index); 
    console.log("Item-Data: ", itemData); 
    console.log("Title: ", itemData.title); 
    // CHECK here again the CONSOLE !!! 
    // What do you get for INDEX ? 
    // What do you get for itemData? 
    // What do you get for TITLE ?

// You will get output, only if you made no mistakes in the green-marked code-line and if you get some results in the console, on the orange marked codeline.
});
});

function search() {console.log(“Search running…”);
let myQuery = wixData.query(DATABASE);
if($w(‘#dropdown1’).value) {
myQuery.contains(“areasOfSpecialization”, String($w(‘#dropdown1’).value));
}
if($w(‘#dropdown2’).value) {
myQuery.contains(“sportSpecificSpecialization”, String($w(‘#dropdown2’).value));
}
if($w(‘#addressInput2’).value) {
myQuery.contains(“locationCityState”, $w(‘#addressInput2’).value.toString());

}       
myQuery.find() 
return myQuery.find() 
.then((results)=>{console.log(results); 
    return(results);}) 
.catch((err)=>{console.log(err);}); 
$w('#resetButton').show(); 
$w('#resetButton').enable(); 
$w('#searchButton').enable();

}

Topic		Replies	Views
Search Box/Drop Down to Repeater Ask the community code , question	9	1143	February 7, 2019
Database Search: "Search By" dropdown Ask the community code , question	4	84	February 12, 2021
How to search multiple fields in a database? Ask the community code , question	3	973	October 1, 2019
Search dropdown Ask the community code , wix-stores , question	1	128	July 8, 2018
Search in multiple database columns Ask the community code , question	3	143	June 20, 2021

Search database from using dropdown element and by location in database

I think a “return” was missing.

Related topics