Streaming live at 10am (PST)

Custom Code help

Hello,

I need a little help with custom code. I’ve created an instant on page search. It works fine but i would like placeholder text to appear when there is no result. Something like “no results” to make the user aware. You’ll find the code in the page settings for ‘podcasts’.
I have very minimal code knowledge so i’d appreciate any help. Thank you!

https://preview.webflow.com/preview/labaroma?utm_medium=preview_link&utm_source=designer&utm_content=labaroma&preview=5e740186153bb7d15befb296e98ee8da&pageId=5ec7e8bd0a860f4e0d6d92f4&mode=preview

I would create a new div with whatever you want to show in this scenario, referenced as noResultsMessageBox at the bottom of the page with a default state of hidden. Then when there are no results, you can simply show this. It’s basically a reverse of what is happening on the page right now.

It’s late here, and I haven’t tested this, so forgive any mistakes… but give this a go:

<script>
$(".instant-search").on("keyup", function() {
  var v = $(this).val();
  $(".results").removeClass("results");
  $(".noresults").removeClass("noresults");
  $(".podcast-ep").each(function() {
    if (v != "" && $(this).text().search(new RegExp(v, 'gi')) != -1) {
      $(this).addClass("results");
      $(".noResultsMessageBox").addClass("noResultsBoxHide");
    } else if (v != "" && $(this).text().search(v) != 1) {
      $(this).addClass("noresults");
      $(".noResultsMessageBox").addClass("noResultsBoxShow");
    }
  });
});
</script>

Then add this to the page CSS:

 .noResultsBoxShow{display:block;}
 .noResultsBoxHide{display:none;}
1 Like

Legend! @iratefox
That worked perfectly!
Many thanks

Oh actually
Could you to take a quick look again @iratefox. I thought i had it working but i hadn’t put put the default state to hidden :woman_facepalming:t3::joy: I’m probably doing something really stupid on my end. Would mind having another quick look?

Sure - what’s happening exactly?

I can see the elements as expected in the project - do you have a published version you’re checking so I can see the behaviour?

Thank you!!
Here is the published version

Well, indeed it’s not quite working as expected. Let’s try resetting the classes in JS mirroring the other objects. Reset the state of the div in the settings panel and try this instead.

In theory, I’m not sure how it makes a difference but let’s see what happens and I’ll investigate more thoroughly later if it doesn’t work.

<script>
$(".instant-search").on("keyup", function() {
  var v = $(this).val();
  $(".results").removeClass("results");
  $(".noresults").removeClass("noresults");
  $(".noResultsBoxHide").removeClass("noResultsBoxHide");
  $(".noResultsBoxShow").removeClass("noResultsBoxShow");
  $(".podcast-ep").each(function() {
    if (v != "" && $(this).text().search(new RegExp(v, 'gi')) != -1) {
      $(this).addClass("results");
      $(".noResultsMessageBox").addClass("noResultsBoxHide");
    } else if (v != "" && $(this).text().search(v) != 1) {
      $(this).addClass("noresults");
      $(".noResultsMessageBox").addClass("noResultsBoxShow");
    }
  });
});
</script>

Hi @iratefox,
Sorry i’m really new to this when you say ’ Reset the state of the div in the settings panel’ what exactly do you mean by this?
I’ve gave the div the class of noResultsMessageBox and set the default to hidden.

So, in the Webflow interface, you can click on the blue ‘Display’ next to the Block, Flex, None etc styles and click reset.

Then you need to make sure you have the class with the capitals in the right place - I didn’t spot this before but this will have an impact as JS is case sensitive - noResultsMessageBox

Also, in the style add this to set a starting point instead of using the UI:

.noResultsMessageBox{display:none;}

Now, this all worked locally in the browser for me so it should work ok for you… Again, I’ll take a look if not :slight_smile:

We’re getting close…

I don’t think it’s picking up the
.noResultsMessageBox{display:none;}
as the div is always displayed at the bottom of page.

I really appreciate your help. I’m sure I just haven’t entered something in right if it works for you.

Ah… capitals are an issue in Webflow. It converts to lower case when published. I forgot this :roll_eyes:

I’m working on the browser with full freedom! When I capitalised the class locally to noResultsMessageBox for the div to match the JS it worked perfectly in the browser.

Change all caps referenced items I gave you to lower case and let’s see where we end up. Based on that, it should work I guess.

Bingo! That done the job. Works perfectly now!

Thank you for taking the time to help me out, greatly appreciated! :smile: :+1:t2:

1 Like