Can anyone assist with connecting site search to collections?

Ask the community
, ,
1

I’m trying to create a site search that pulls data from a content manager collection “Titles”, to the table “resultsTable” . Here’s the code

import wixData from “wix-data” ;

/**

  • Adds an event handler that runs when the element is clicked.

  • @param {$w.MouseEvent} event
    */// Runs a query on the “recipes” collection
    wixData . query ( “Titles” )
    // 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 ;
    });
    $w . onReady ( function () {
    $w ( “#resultsTable” ). columns = [
    {
    “id” : “col1” , // ID of the column for code purposes
    // The field key in the collection whose data this column displays
    “dataPath” : “title” ,
    “label” : “Author” , // The column header
    “width” : 100 , // Column width
    “type” : “string” , // Data type for the column
    // Path for the column if it contains a link

    },
    {
    “id” : “col2” ,
    “dataPath” : “translator” ,
    “label” : “Translator” ,
    “visible” : true ,
    “type” : “string” ,

    },
    {
    “id” : “col3” ,
    “dataPath” : “originalTitle” ,
    “label” : “Original Title” ,
    “visible” : true ,
    “type” : “string” ,

    },
    {
    “id” : “col4” ,
    “dataPath” : “printer” ,
    “label” : “Printerr” ,
    “visible” : true ,
    “type” : “string” ,

    }, //,
    {
    “id” : “col5” ,
    “dataPath” : “publisher” ,
    “label” : “Publisher” ,
    “visible” : true ,
    “type” : “string” ,

    }, // more column objects here if necessary
    {
    “id” : “col6” ,
    “dataPath” : “date” ,
    “label” : “Date” ,
    “visible” : true ,
    “type” : “string” ,

    }, // …
    {
    “id” : “col7” ,
    “dataPath” : “genre” ,
    “label” : “Genre” ,
    “visible” : true ,
    “type” : “string” ,

    },
    {
    “id” : “col8” ,
    “dataPath” : “originalLanguage” ,
    “label” : “Original Langauge” ,
    “visible” : true ,
    “type” : “string” ,

    },
    {
    “id” : “col9” ,
    “dataPath” : “comment” ,
    “label” : “Comment” ,
    “visible” : true ,
    “type” : “string” ,

    },
    {
    “id” : “col10” ,
    “dataPath” : “naxalbadi” ,
    “label” : “Title of Translation” ,
    “visible” : true ,
    “type” : “string” ,

    },
    {
    “id” : “col11” ,
    “dataPath” : “link-Titles-title” ,
    “label” : “Title (Author)” ,
    “visible” : true ,
    “type” : “page link” ,
    “linkPath” : “link-field-or-property”
    }];
    }); // This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
    // Add your code for this event here:

And here’s the results:

2286×392 30.6 KB

Can anyone assist with this issue?

2 
import wixData from "wix-data";

const COLLECTION = "Titles";
const DATAFIELD = "name";

$w.onReady(function() {  
    start_Searchengine();  
    start_tableSetup();
});

    
function start_Searchengine() {
    let VALUE = $w("#searchBox").value;
    wixData.query(COLLECTION).contains(DATAFIELD, VALUE).find()
    .then((res)=> {console.log(res.items); $w("#resultsTable").rows = res.items;});
}


function start_tableSetup() {
    $w("#resultsTable").columns = [
      {
        "id": "col1",       // ID of the column for code purposes
        // The field key in the collection whose data this column displays  
        "dataPath": "title", 
        "label": "Author", // The column header
        "width": 100,       // Column width
        "type": "string",   // Data type for the column
        // Path for the column if it contains a link  
      },
      {
        "id": "col2",
        "dataPath": "translator",
        "label": "Translator",
        "visible": true,
        "type": "string",
      }, 
      {
        "id": "col3",
        "dataPath": "originalTitle",
        "label": "Original Title",
        "visible": true,
        "type": "string",
        
      },
      {
        "id": "col4",
        "dataPath": "printer",
        "label": "Printerr",
        "visible": true,
        "type": "string",
      },//,
      {
        "id": "col5",
        "dataPath": "publisher",
        "label": "Publisher",
        "visible": true,
        "type": "string",
        
      },// more column objects here if necessary
      {
        "id": "col6",
        "dataPath": "date",
        "label": "Date",
        "visible": true,
        "type": "string",
        
      },// ...
      {
        "id": "col7",
        "dataPath": "genre",
        "label": "Genre",
        "visible": true,
        "type": "string",
        
      },
      {
        "id": "col8",
        "dataPath": "originalLanguage",
        "label": "Original Langauge",
        "visible": true,
        "type": "string",
        
      },
      {
        "id": "col9",
        "dataPath": "comment",
        "label": "Comment",
        "visible": true,
        "type": "string",
      },
      {
        "id": "col10",
        "dataPath": "naxalbadi",
        "label": "Title of Translation",
        "visible": true,
        "type": "string",
      },
      {
        "id": "col11",
        "dataPath": "link-Titles-title",
        "label": "Title (Author)",
        "visible": true,
        "type": "page link",
        "linkPath": "link-field-or-property"
      }
    ];
}
3

The table must be initialized before the query is performed (the items are assigned to the rows property).

Replace the order of the call stack.

4

So than…(i did not test it)

$w.onReady(function(){ 
	start_tableSetup ( ); 
	start_Searchengine ( ); 	
});