Working Search Bar for Morarable - Rarible Clone

@malik
@cryptokid
@ivan

Hey guys, is it possible any of the team can point point out the basic code framework needed to impliment a working search function that can be used in the Morarable / Rarible clone project.

Ie: Query the database using the search bar “user” input, and then to return and display the NFTs - associated with the search term entered in the search bar. Query user names, item names, or any descriptions… and then to display them to the client on the html side within the given divs in the index.html?

Ive been toying around with this, using a few different methods without much success, and imagining that others might have the same question, given the tutorial seems to have left this out.

Of course any general skeleton framework would be just fine to experiment with, and to verify with console log, that there is a successful return etc.

Any guidance would be greatly appreciated.

Deus

1 Like

It’s always better to fetch all the user related details on the search. You can do a simple user query as soon as the search is clicked. Then display a list on your UI. Furthermore, you can make each item as clickable in the list and then do another query search for that particular NFT to fetch more details of the NFT.

You can add more functionality to it as you please, it’s more of a frontend functionality than a moralis cloud functionality.

For displaying a list of items from the search bar you can use many of the Vanilla JS or React implementations from the web and update their API calls with Moralis calls and you have your solution.

Nevertheless, it would be nice to have such a tutorial in place too. Thanks for the input. If you figure out the exact implementation before us, then do share it here with rest of the developers.

Have a nice day.

You could also try full text search:
https://docs.moralis.io/moralis-server/database/queries#full-text-search

Full-Text Search
You can use fullText for efficient search capabilities. Text indexes are automatically created for you. Your strings are turned into tokens for fast searching.
Note: Full-Text Search can be resource-intensive. Ensure the cost of using indexes is worth the benefit, see storage requirements & performance costs of text indexes.
const query = new Moralis.Query(BarbecueSauce);
query.fullText('name', 'bbq');
2 Likes

@Malik

Before I start please know that I greatly appreciate your help and understanding with what might seem laughable when you read this, however, it looks like ive been having a hackathon of my own taking place over here. :confused: In fact I think ive actually broken the internet with my frankenstein code - trying to impliment what might be something overly simple :confused: and im just all over the place with this search bar functionality.

below is what ive put together on the index.html for the search bar.

<form class="mx-2 d-inline flex-md-fill">
                <input type="text" id="search" class="bg-transparent border-light form-control text-light mr-sm-2 rounded-pill" placeholder="Search for NFTs">
            </form>

Below is frankenstein who know resides in my main.js

search = async () => {
    const showItems = await Moralis.Cloud.run("getItems");
    user = await Moralis.User.current();
    items.forEach(item => {
        if (user){
            if (user.attributes.accounts.includes(item.ownerOf)){
                const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
                if (userItemListing) userItemListing.parentNode.removeChild(userItemListing);
                getAndRenderItemData(item, renderUserItem);
                return;
            }
        }
        getAndRenderItemData(item, renderItem);
    });
}

const search_input = document.getElementById('search');

let search_term = '';

search_input.addEventListener('input', e => {
    // saving the input value
    search_term = e.target.value;

});

showItems = async () => {
    const showItems = await Moralis.Cloud.run("getItems");
    user = await Moralis.User.current();
    items.forEach(item => {
        getAndRenderItemData(item, renderItem);
    });
}

const showItems = document.getElementById("showItems");

To be honest, I would imagine, it would be best if you didnt even look at this for reference in seeing what went wrong. In fact the comment about having broken the intenet is - Console log isnt even showing any errors. It just gave up on me i guess. lol.

What im hoping you might tell me - whenever it might be convenient to share any simple implimentation that could work I would be very grateful. As although you explained it previously what might be a simple vanilla JS to make this work, I cant seem to wrap my head around changing what would be a typical call to an API, to using the moralis query.

What im trying to achieve is similar to the table set of marketplace items that display when a user lands on the page, that populates based on user input in the search bar, where items are removed or added automatically based on a match in the title or description. Something extra coool would be as you explained, each could even be clickable - maybe to open the item up in a modal or even just be displayed by itself with some added details about it, clickable still to buy etc.

Any framework you can might provide to start experimenting? Like a basic example to start with in my actual main.js, rather than an explanation of where to find ideas that I would need to be rewrite of figure out where to fit the moralis query requirement. Please let me know when you can - again, my humbled thanks in advance - and not pressing of course - so whenever it might be convenient.

Here’s a link to the implimentation as well.
https://deusex.me/sothenfts/binance_smart_chain/

By the way, have a look at the really cool, image editing application I have now embedded into the create item link, allows for the on the fly nft creation with massive amounts of filtering and image editing features like a built in photoshop.

In any event, I really apprecite you guys, and hope to continue learning - and building together with you all. Any help you might offer - would be sincerely appreciated.

Deus

1 Like

I did forget, i did also add this container as the area on index.html where the searched items would potentially render as would be the same format used to display items that are in teh marketplace originally. In case it mattered with regard to any reply any might offer.

<div class="container">
        <div class="row row-cols-1 row-cols-md-4 mt-5" id="showItems">
        </div>
    </div>  

thanks again.

Deus.

You may need something like this:
https://www.cloudways.com/blog/live-search-php-mysql-ajax/

$(document).ready(function() {
   //On pressing a key on "Search box" in "search.php" file. This function will be called.
   $("#search").keyup(function() {
       //Assigning search box value to javascript variable named as "name".
       var name = $('#search').val();
       //Validating, if "name" is empty.
       if (name == "") {
           //Assigning empty value to "display" div in "search.php" file.
           $("#display").html("");
       }
       //If name is not empty.
       else {
           //AJAX is called.
           $.ajax({
               //AJAX type is "Post".
               type: "POST",
               //Data will be sent to "ajax.php".
               url: "ajax.php",
               //Data, that will be sent to "ajax.php".
               data: {
                   //Assigning value of "name" into "search" variable.
                   search: name
               },
               //If result found, this funtion will be called.
               success: function(html) {
                   //Assigning result to "display" div in "search.php" file.
                   $("#display").html(html).show();
               }
           });
       }
   });
1 Like

Thanks a million @cryptokid. Youre the man, Ill begin working on this straightaway, and share with the forum for others if I come up with any success.

Warm regards.

Deus

1 Like

@Cryptokid - Thanks for the starter on this, been toying around with this - since getting it and cant seem to figure it out.

Given the framework, connects to an MySQL server - meanwhile moralis is something altogether different. Among other things the reults that would be displayed simply render as a list - unformated and not rendered into the card format like we have with the items on sale in the marketplace… To be honest it seems like a lot of code and tweeking and rigging this together to get what really seems like what would be a simple query method - to pull data from the moralis server and display it to a specific div… like we are already doing automatically with items listed for sale in the market. The only difference now is to query the database to return and display items that match the text input from a user in the search bar. I would simply imagine a basic functionality and needed for almost any dapp.

Being completely impressed by the ideas of creating apps like @ivan who would explain… in the videos "in a few lines of code - with one click :slight_smile: and you have this amazing app :slight_smile: that can run marathons and peel potatoes while you sleep and the world will never be the same. and here I am burning down the internet to impliment a functioning search bar to this Morarable clone. Trust me - I know its me and my lack of knowledge but im here trying my best and hoping you guys could help.

Do you think it’s possible that someone might petition @Capplequoppe for his guidance in finishing the code for this feature that seems to have been abandoned in the project? Seeing how he built this thing in less than 1 day, it would probably take hime 2 minutes to add.

From what I understand it would help alot of students to the tutorial - improve upon the repo - and teach an important function in search functionality - the API - Query methods that work in cases like this - for hopeful and developers in training - thinking of subscribing, and win the hearts of more, including myself, who are here in the trenches with you guys… before you became the famous rockstars of code I trust you will all soon be known…:slight_smile: Remember the little people. :slight_smile: Help! :slight_smile:

Deus

1 Like

That was only an example with what he did with PHP, the part that what you need should be something like:

$(document).ready(function() {
   //On pressing a key on "Search box" in "search.php" file. This function will be called.
   $("#search").keyup(function() {
       //Assigning search box value to javascript variable named as "name".
       var name = $('#search').val();
       //Validating, if "name" is empty.
       if (name == "") {
           //Assigning empty value to "display" div in "search.php" file.
           $("#display").html("");
       }
       //If name is not empty.
       else {
            found_items_info = await Moralis.Cloud.run("getItemsInfo", {"substr": name});
            $("#display").html(found_itmes_info).show();
      }
}
1 Like

could you explain that more if it is possible ? I tried many things but could not success. I can filter what I want on javascript console but could not implement with all codes.Thank you so much