Need help with this code please

Ok so, I have been struggling to know how I can modify this code :

$(function() {
    $('.searchTerm').bind('keyup change', function(ev) {
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight();

        // disable highlighting if empty
        if ( searchTerm ) {
            // highlight the new term
            $('body').highlight( searchTerm );
            
            $('html, body').delay(1500).animate({
        scrollTop: $('#results').offset().top +10
    }, 475);
        }
    });
});

All I want to do, is to know how I can get this code to scroll up and down when I hit enter in my search field. For example, if the word is at the bottom, I hit enter, it will scroll to the bottom to where it is. If the next word is at the top, it will scroll back up.

Also when I clear the search field, it’s buggy. It will not scroll back to the top. How do I do all this? Please let me know if more code is needed, but my main issue is with the JS part. Thanks.

Anyone? I’ve been searching all around the web for my issue, but still have not been able to find what I need. I did find something similar, which was here: https://codepen.io/naulacambra/pen/BaoqwzG?editors=1010 . I do want to do as it shows, but without hitting enter, and after typing the word instead.

???. Why isn’t anyone helping me :sob:. There’s not much I can do. I have searched all over to see what I can find, but have had no luck. Shouldn’t be this difficult. I have seen it done…

Edit : All I want to do, is to know how I can get this code to scroll up and down when I hit enter in my search field. For example, if the word is at the bottom, I hit enter, it will scroll to the bottom to where it is. If the next word is at the top, it will scroll back up.

I meant as I am typing the search term, not when hitting enter.

This is not particularly a JS problem at its core. The only JS concept that is that when you click on enter you need the site to open a link (although this can be done with html too, if it’s kept simple).

For example, with pure html we can write (css can add smooth scrolling but that’s tangential to the core of the issue).

<a href="#targetWhereYouWantToAutoScroll">Scroll to target</a>

<div id="targetWhereYouWantToAutoScroll">This is the targer div and has relevant content to the link you just pressed</div>

Now, you simply need a button with an eventListener that on click will open the link. If you get this working you can add complexity to the search pattern after, but make sure this much works.

There’s some discussion here about it:

Also it seems by the syntax you’re writing in jQuery? @ladan8515430137 is this true?

1 Like

Hi @toastedpitabread. Ok I have seen that topic as you linked there. My problem is that I don’t want to have to use the mouse to click and scroll. I just want it to scroll to the search term as I’m typing, and then scroll again if it’s further down the page or at the top.

@toastedpitabread yes, I am using jQuery. Sorry I didn’t see your question on that :slight_smile:

Can you explain it differently? To me that sounds like ctrl-F or command-F find function in the browser. In which case you don’t need to duplicate it.

Also jQuery is a little out-of-date that’s why you might not get a lot of responses to the code snippet. Not a lot of new people are using it now.

Also jQuery is a little out-of-date that’s why you might not get a lot of responses to the code snippet. Not a lot of new people are using it now.

So what’s used now? As for explaining it differently, how? And how’s it sounding like the ctrl-F or command-F?

For example, in my Firefox browser if i press command-F it brings up a search bar to “find in page”. When I type a match, it automatically scrolls to and highlights the text if it’s in the page.

It’s mainly just javascript, optionally paired with one of its frameworks (React, Angular, Vue). (I threw out a big jQuery book I had lying around in my library recently…) It’s not to mean it can’t be useful still (albeit not as effective), but people learning stuff here tend to go for the newer stuff.

1 Like

Oh ok. Yeah it is the ctrl-F I guess.

Theoretically if you still wanted to do that, you could put an event listener for input and have it run a function on every change.

1 Like

Would that then do what I want? I mean, how can I add it to the code I have?

I mean I would just write in JS because that’s what I know better at this point. Regardless in almost any language, the blueprint would look more or less like:

The idea would be to have a function goToTerm() that does the following

  • searches the entire body of text in the page (you can use regex)
  • for every match, it highlights the text
  • it opens a link that triggers a scroll to the first match (similarly but not quite the same as how I showed earlier).
  • it gives you some sort of interactive widget to cycle through multople matches (this bit would be more complicated)
  • counts all the matches and informs you of the total amount

Then just add an event listener than on text input. Every time the event is triggered, the goToTerm() function is executed with the total text in the search bar as its search argument.

It’s actually a nice programming exercise.

So, I’d have to use different code then, not the one I already have…

Well, you could probably change what you have (it’s kind of similar). The point is, since the functionality already exists, it’s something you would do as an exercise in programming technique.

You could totally write this in jQuery. The challenge is about how to make each step happen. Have you been writing a lot in jQuery?

I would say it’s not trivial to learn this because going the process of manually writing and debugging this would yield better understanding of how things can be manipulated (and how things can be searched for).

No, I don’t know much of jQuery really. Am a newbie. Is why I need help in knowing how I can change my code to do what I need.

Ah then I suggest taking some courses in javascript! There’s many available (and there are good ones for free) and you’d be surprised at how powerful it is with only a little bit of study.

You would also learn how to phrase questions in a way that people will really want to help. Coders are tinkerers by nature and they like to help other people tinker. So maybe nobody will help you with copy-and-pasted code… but if for example you tried to code it from scratch and have a particular question about one of the steps, a lot of people would chime in.

2 Likes

Here’s a free and incredibly useful book: https://eloquentjavascript.net/

1 Like

I’d do that, but I just want to be pointed in the right direction. I’m not that patient in learning stuff lol. Maybe you could show me what it would look like to change what I have? I could then try to look through it to understand what’s happening and what I should know.