> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Adding Collection Data Search Functionality ## Article: Adding Collection Data Search Functionality ## Article Link: https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/displaying-data/adding-collection-data-search-functionality.md ## Article Content: # Velo Tutorial: Adding Collection Data Search Functionality
Visit the Velo by Wix website to onboard and continue learning.
This article assumes some understanding of [database collections](https://support.wix.com/en/article/about-database-collections) and [datasets](https://support.wix.com/en/article/about-datasets-6368396) and how they are used in Velo.  With Velo you can add a database collection to your site and display the data in many ways. Visitors to your site can also search that data. You can add this search functionality to your site by adding user input elements to the page and then adding some code to enable the search. There are different ways you can let your visitors search your collection. This article covers the following options: * Adding an **input field** where visitors enter a search string. * Adding a **dropdown list** where visitors select a value from a list. While the results can be displayed however you want them to appear on the page, in this article we'll cover how to display the data in a table. At the end of the tutorial we'll also cover how to optionally collapse the table until you are ready to display the results. ## Search Using an Input Element Let's say you have a list of recipes in your collection and you want users to be able to search for them by entering their name in a user input element. Once the visitor clicks a search button, the results are displayed in a table on the same page. To do this, you add to your page an input element where the user enters a search term, a button that enables the search, and a table to display the results. Then you add code to make the table only display data that matches the user input. In this example, the table is not connected to a dataset, so code is needed to set up the table columns to match the data structure. #### 1\. Add the input, button, and table elements to the page 1. Add an input box, a button, and a table to your page.  You can customize them as you like. For example, you could change the text of the button to "Search" and configure the placeholder text of the input box to read "Search recipes." 2. Consider changing the IDs of each element that you just added to make them meaningful.  #### 2\. Add the code for inputting a search string Now configure the search button so that when it's clicked, the search is performed on the collection based on what a user entered into the input box. Then you need to have those results populate the table you added. 1. Add the import statement for the Wix Data API to the top of your code: ```javascript import wixData from "wix-data"; ``` 2. Add an [onClick event](https://www.wix.com/velo/reference/$w.Button.html#onClick) to the button. The following code is added to your page. ```javascript export function searchButton_click(event) { //Add your code for this event here: } ``` 3. Replace existing text with the following code: ```javascript // Runs a query on the "recipes" collection wixData.query("recipes") // Query the collection for any items whose "Name" field contains // the value the user entered in the input element .contains("name", $w("#searchBox").value) .find() // Run the query .then(res => { // Set the table data to be the results of the query $w("#resultsTable").rows = res.items; }); ``` #### 3\. Define the table columns Because your table isn't connected to a dataset, you need to define the columns using the [API for tables](https://www.wix.com/velo/reference/$w.Table.html#columns). You do this by defining a JSON object that lists the properties for each column and their values. The code is placed in the onReady function and looks like this: ```javascript $w.onReady(function () { $w("#resultsTable").columns = [ { "id": "col1", // ID of the column for code purposes // The field ID in the collection whose data this column displays "dataPath": "field1", "label": "Field 1", // The column header "width": 100, // Column width "type": "string", // Data type for the column // Path for the column if it contains a link "linkPath": "link-field-or-property" }, { "id": "col2", "dataPath": "field2", "label": "Field 2", "visible": true, "type": "image", "linkPath": "link-field-or-property" } //, // more column objects here if necessary // ... // ... }]; }); ``` For example, the column definitions of a table that shows the results of a search on your recipes collection might look like this: ```javascript $w.onReady(function () { $w("#resultsTable").columns = [{ "id": "col1", "dataPath": "title", "label": "Recipe", "type": "string", }, { "id": "col2", "dataPath": "course", "label": "Course", "type": "string", }, { "id": "col3", "dataPath": "meal", "label": "Meal", "type": "string", }]; }); ``` You can copy all this code directly into your page code. You need to replace the following element IDs and the collection name with those in your site. Just hover over the element to see its ID. * `wixData.query("recipes")` - Replace `recipes` with the name of your collection. * `.contains("name", $w("#searchBox")` - Replace `name` with the [field ID](https://support.wix.com/en/article/about-database-collections#field-id-velo-by-wix-only) of the field in the collection that is being searched. Replace `searchBox` with the element ID of your input box where visitors enter the string to search. * `$w("#resultsTable")` - Replace `resultsTable` with the element ID of your table that displays the search results. * `"dataPath value"` - Replace with the field IDs in your collection. You can now preview your page and check that everything works as expected.  ## Filter Using a Dropdown Element Now let's say you want users to select a value from a dropdown list of courses so they can filter your recipes. The list of courses is already in your collection. First, we add the dropdown and connect it to the collection via a dataset to populate the options directly from the collection. Then we add a table to display the selection, and finally we write the code. 
**Tip** You can also [filter displayed data based on a user selection in a dropdown](https://support.wix.com/en/article/cms-formerly-content-manager-setting-up-filters-for-site-visitors-using-input-elements) directly in the editor, without code.
#### 1\. Add the dropdown and table elements to the page 1. Add a dropdown list element and a [dataset](https://support.wix.com/en/article/adding-and-setting-up-a-dataset) to your page. Make sure the dataset is set to **Read** mode or **Read & Write** mode. 2. In the [Connect Dropdown](https://support.wix.com/en/article/cms-connecting-elements-to-a-collection-using-a-dataset) panel, select **Filter content**. 3. Add a table element to your page. #### 2\. Add the code for the dropdown selection to filter the collection Now add the code so that the user's selection in the dropdown is used to filter your collection. 1. Add the import statement for the Wix Data API to the top of your code: ```javascript import wixData from "wix-data"; ``` 2. Add an [onChange event](https://www.wix.com/velo/reference/$w.Dropdown.html#onChange) to the dropdown list. The following code is added to your page. ```javascript export function searchList_change(event) { //Add your code for this event here: } ``` 3. Replace existing text with the following code: ```javascript // Runs a query on the "recipes" collection wixData.query("recipes") // Query the collection for any items whose "Name" field contains // the value the user selected in the dropdown .contains("course", $w("#myDropdown").value) .find() // Run the query .then(res => { // Set the table data to be the results of the query $w("#resultsTable").rows = res.items; }); ``` #### 3\. Define the table columns Follow the instructions in the previous example to define the results table. Then preview your page and check that everything is working as expected. ## Filter Dropdown Options Distinctly In the last step, we displayed all recipes for a selected course in a table on the page. We might have many recipes for each course in our collection, so our table displays the course multiple times, once for each recipe.  We do not, however, want to display duplicate course values in the dropdown's options. We want each dropdown option to be distinct from the others.  First, we modify the dropdown we already added by disconnecting it from the collection in the editor. We then add code to populate the options directly from the collection.   #### 1\. Disconnect the dropdown from the collection We will populate the dropdown from the collection but with code. So let's disconnect it from the collection in the editor. 1. **Select** the dropdown list element on your page.  2. In the [Connect Dropdown](https://support.wix.com/en/article/cms-connecting-elements-to-a-collection-using-a-dataset) panel, under the **Choose a dataset** section, select the option **Not connected**.  #### 2\. Add code to populate the dropdown with distinct options We now add a function to populate our dropdown using [`distinct`](https://www.wix.com/velo/reference/wix-data.WixDataQuery.html#distinct) function. We call this function `loadOptions()`. The `distinct()` function queries the collection and returns field values that do not contain duplicates. To populate the dropdown, the distinct query results have to be formatted as an array of strings in a certain format. `loadOptions()` calls the `buildOptions()` function for this purpose. This example also demonstrates how to insert an extra **All Courses** option to our dropdown so users can reset the filter from the dropdown. You can copy the following code for these functions directly into your page code. You need to replace the element IDs and the collection name with those in your site. ```javascript function loadOptions() { // Run a query that returns distinct items in the collection wixData.query("recipes") // Set the course as the field that must be distinct .distinct("course") .then(results => { // Call another function to reformat the distinct items // the way the dropdown element expects let distinctList = buildOptions(results.items); // Use `unshift()` to add another dropdown option at // the beginning of the array, in the correct format distinctList.unshift({ "value": '', "label": 'All Continents' }); // Set the options of the dropdown $w("#myDropdown").options = distinctList; }); } ``` Let's now code the `loadOptions()` function. This function takes each distinct item from the collection and reformats the option in the [format expected by the dropdown](https://www.wix.com/velo/reference/$w/dropdown/options): `{ "label": "uniqueTitle", "value": "uniqueTitle" }` ```javascript function buildOptions(dropdownItems) { return items.map(currentItem => { return { "label": "currentItem", "value": "currentItem" }; }); } ``` Now call the `loadOptions()` function in the `$w.onReady()`, to load the options into the dropdown. Replace `resultsTable` with the ID of your table. ```javascript $w.onReady(() => { loadOptions(); $w("#resultsTable").columns = [{ ... ... ... }]; }); ``` Preview your page and check that everything works as expected.  ## Optionally Collapse the Table on Load The way both searches are set up, an empty table appears when the page loads. You can collapse the table so that it does not take up any space on the page and configure it to expand only after the search is performed. 1. In the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) for the table, select **Collapsed on load**. 2. In the code you added for the search, right below where you instructed the table to be populated with the results of the query on the data collection, add this line to expand the table.  ```javascript $w("#resultsTable").expand(); ``` Replace `resultsTable` with the ID of your table. For example, the code for performing the search with a dropdown would look like this for a table whose index key is `resultsTable`: ```javascript wixData.query("recipes") .contains("name", $w("#searchList").value) .find() .then(res => { $w("#resultsTable").rows = res.items; $w("#resultsTable").expand(); }); } ``` ## API List The following APIs are used in the code in this article. To learn more, see the [API Reference](https://www.wix.com/velo/reference/). **wix-data** * [wix-data.query( )](http://wix.to/94BuAAs/wix-data.html#query) - Creates a query. * [wix-data.WixDataQuery.find( )](http://wix.to/94BuAAs/wix-data.WixDataQuery.html#find) - Returns the items that match a query. * [wix-data.WixDataQuery.distinct( )](http://wix.to/94BuAAs/wix-data.WixDataQuery.html#distinct) - Returns the distinct items that match a query.