Move scrollbar automatically up or down when searching for a word or text inside a div

Question

1.00/5 (1 vote)

See more:

I am having a div inside a textbox and if I do a search for a word or text inside the div that contains text larger than the textbox a scrollbar is added to the div. If text is found, it should highlight the text and move the scrollbar to display the word/text.

here I am able to navigate and highlight the text which I am searching for but scrollbar is not moving to bottom when I search, not showing the word/text although it is highlighted.

What I have tried:

<pre><div>
{{html}}
</div>

  css
.sample-text-container {
  
    height: 500px;
    width: 500px;
    float: left;
    background-color: rgb(233, 225, 225);
    margin-left: 100px;
    overflow: auto;
    border-style: groove;
    position:static;
}

Posted 16-Feb-22 19:36pm

sravani n 2022

Updated 18-Feb-22 4:53am

Andre Oosthuizen

v2

Add a Solution

Comments

Chris Copeland 17-Feb-22 5:21am

You haven't provided any HTML or JS code, only CSS code. It's going to be difficult to help provide a solution when we can't see what you've attempted already. We can best guess, but if you're using a library like jQuery then it'll be much simpler than using vanilla JS.

Can you include the JS code you've managed to produce and some example HTML?

sravani n 2022 17-Feb-22 7:35am

Hi I am sending the stackblitz link and in that project my problem is it is highlighting the text but when i searched and i go findnext it scrolbar also should move to down when i enter next next next i meant srollbar and text should navigate

Chris Copeland 17-Feb-22 10:47am

I still can't see any JS or HTML code relevant to this problem. You've not shared anything which can be used to diagnose the problem. For example, I don't know what this findnext is, so I can't provide help!

sravani n 2022 17-Feb-22 7:36am

and if you can help ... i am glad for that

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Answer 1 · 2022-02-18T04:53:00

I have re-arranged your question a bit. As per srvani, you had to give us some show of effort from your side as the css does not help nothing at all -

That being said, the below is an example of what you are looking for.

JAVA

var searchButton = document.getElementById('submit'),
    searchText   = document.getElementById('search');

// the text property is what the search input is compared against
// once a match is found, the id property is used to lookup the element
var items = [
    { text: 'Item 1', id: 'item1' },
    { text: 'Item 2', id: 'item2' },
    { text: 'Item 3', id: 'item3' },
    { text: 'Item 4', id: 'item4' }
];

function searchForItem(query) {
    for (var i = 0; i < items.length; i++) {
        if (items[i].text.indexOf(query) !== -1) {
            return document.getElementById(items[i].id);
        }
    }
}

searchButton.addEventListener('click', function () {
    var query = searchText.value,
        item  = searchForItem(query);
    if (typeof item !== 'undefined') {
        item.scrollIntoView();
    }
});

HTML

<input id="search" type="text" placeholder="Type here"/>
<input id="submit" type="button" value="Search" />


<div id="item1" class="space">Item 1</div>
<div id="item2" class="space">Item 2</div>
<div id="item3" class="space">Item 3</div>
<div id="item4" class="space">Item 4</div>