Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Array Searching

  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Array Searching

    Here is my code:

    Code:
    <style>
        .found {background-color: yellow; font-weight: bold; color: blue;}
        #results {border: solid blue 2px; width: 200px;}
    </style>
    
    <script>
        function searchText(){
            outStr = ""
            inStr = document.myForm.myText.value
            searchStr = document.myForm.searchField.value
            sLen = searchStr.length
            foundCount = 0
            for (x=0; x<inStr.length; x++){
                if (inStr.substr(x,sLen) == searchStr){
                    outStr = outStr + "<span class='found'>" + searchStr + "</span>"
                    foundCount ++
                    x += sLen-1
                }
                else{
                    outStr += inStr.substr(x,1)
                }
            }
            document.getElementById("results").innerHTML = "<b>" + foundCount + " </b>results found.<br><br> " + outStr
        }
    </script>
    
    <form name="myForm">
    <textarea name="myText">
    This is my sample text area.  This is where I will place the sample text.  I really hope that this works the way I planned.
    </textarea>
    <br>
    <input name="searchField"><input type=button onClick="searchText()" value="Search Text">
    </form>
    Results:
    <div id="results"></div>
    What I want to do is have an array of words in a seperate Javascript file. So then whenever the user types something into the text are and hit's 'Search text', it will highlight the words from the array if it exists.

    Eg. Hello[0] is in the array.

    The user types in the text area 'Hello my name is John'

    The word Hello is highlighted since it exists in the array.

    If anyone can tell me how to do this, Greatly appreciated.

    Regards,
    Flow

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    A textarea can only support plain text.

    But have a look at

    http://stackoverflow.com/questions/3...pe-on-textarea

    http://www.strangeplanet.fr/work/jqu...lighttextarea/


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    TheFlowFX (11-12-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,453
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Not hard.

    But you can't highlight it in the <textarea>. Textarea's don't allow HTML tags to change the appearance of the text therein.

    You would have to display the result in a <div> or <span>.

    Is that okay?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yes this is brilliant. Thank you so much. Just another quick question:

    How can I replace this in my code:
    Code:
    <script>
        var _terms = ['January', 'February', 'March']; // YOUR SEARCH TERMS GO HERE //

    And have a separate JS file with an array of many words.

    The rest of the code is here:

    http://stackoverflow.com/questions/3...pe-on-textarea

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,453
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Just replace all uses of _terms with the name of your array.

    Or simply do
    Code:
        var _terms = theNameOfYourArray;
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    This example may help to move you forward.

    Code:
    <html>
    <head>
    
    <style type="text/css">
    .highLight1 {font-family: arial; font-size: 12pt; color: #FF0000; font-weight: bold; background-color:#b0c4de; }
    </style>
    
    </head>
    
    <body onload = "findwords()">
    
    <textarea id = "myta" rows = "15" cols = "75" onkeyup = "findwords()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum "leo", scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum? Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna Mauris, pellentesque at ultricies vitae, fermentum vitae dolor. </textarea>
    <br><br>
    <div id = "hText"></div>
    
    <script type = "text/javascript">
    
    // Note textarea can only support plain text so highlighted results must be in a div
    
    function findwords() {
    
    var words = ["lorem", "dolor", "massa", "magna", "mauris"];
    var text = document.getElementById("myta").value;
    document.getElementById("hText").innerHTML = text;
    text = text.split(" ");
    
    for (var i=0; i<text.length; i++) {
    for (var j=0; j<words.length; j++) {
    var temp = text[i];
    var templc = temp.toLowerCase();
    templc = templc.replace(/[^a-z0-9]/gi,"");  // strip punctuation
    if (templc == words[j].toLowerCase()) {  // find whole words only
    var repval = "<span class='highLight1'> " + temp + " <\/span>"
    text[i] = repval;
    var output = text.join(" ");
    document.getElementById("hText").innerHTML=output;
    }
    }
    }
    
    }
    
    </script>
    
    </body>
    </html>
    Last edited by Philip M; 11-14-2012 at 08:05 AM. Reason: Improved

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    62
    Thanks
    0
    Thanked 12 Times in 12 Posts
    I guess, he's looking for something like autocomplete.
    There are many code snippets on the internet.
    Google: autocomplete.

    Or do you need something different?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •