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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Interesting Problem - Maybe Needs a Javascript Guru Help?

    Hello guys I am very much a novice with javascript, but I have a problem with which I think one of the JS gurus in here might be able to help with.

    I have about 10,000 keywords on a single web page. There is a checkbox next to every keyword. Some of these keywords are 2 to 3 word phrases.

    I can type a word in a browser like Firefox and highlight all the instances that a particular keyword is found. Unfortunately there is no firefox extension that would automatically check a box next to the highlighted/found keyword.

    Instead of manually checking the checkbox next to every keyword highlighted in the browser here is what I would ideally like to accomplish (with the help of javascript).

    - Have a text field on top of the page and be able to type in a word and hit submit
    - if a word is found among the keywords/phrases on the page, then the checkbox next to that keyword/phrase is automatically checked.

    All i need is the checkboxes checked for every instance the searched keyword is found. I don't care if the above procedure is used. If someone can suggest a better route i'm open for it.


    I don't see why it wouldn't be possible with javascript code.
    Any help would be greatly appreciated.
    Last edited by frank5050; 01-07-2012 at 12:24 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Not hard at all.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function checkForWord( wordField )
    {
        var form = wordField.form;
        var word = wordField.value.replace(/^\s+/,"").replace(/\s+$/,"").toLowerCase();
    
        var inputs = form.getElementsByTagName("input");
        for ( var e = 0; e < inputs.length; ++e )
        {
            var field = inputs[e];
            if ( field.type == "checkbox" )
            {
                if ( field.value.toLowerCase().indexOf(word) >= 0 )
                {
                    field.checked = true;
                } else {
                    // OPTIONAL, if you do NOTwant to clear previously checked boxes, omit next line:
                    field.checked = false;
                }
            }
        }
    }
    </script>
    </head>
    <body>
    <form onsubmit="return false;">
    Type a word: <input name="word" onchange="checkForWord(this);" />
    <hr>
    <label>
        <input type="checkbox" name="keywords" value="An apple a day keeps the doctor at bay">
        An apple a day keeps the doctor at bay
    </label></br/>
    <label>
        <input type="checkbox" name="keywords" value="All work and no play makes Jack">
        All work and no play makes Jack
    </label></br/>
    <label>
        <input type="checkbox" name="keywords" value="When in the course of inhuman events...">
        When in the course of inhuman events...
    </label></br/>
    </form>
    </body>
    </html>
    If you wanted to avoid having the words both as part of the label and in the <input>'s value, that's not hard either.
    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.

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi pedant. Thanks for the response. Let me get back with you after I implement your code on the page.
    Last edited by frank5050; 01-07-2012 at 06:28 PM.

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Works very well. Just as intended. Thanks a bunch for that.

    The only enhancement I would like to request is in the search feature.

    For example currently when I type the phrase 'blue widgets' in search, it will only identify/find the checkbox if the phrase 'blue widgets' exits in sequence. If I have a pre-existing keyword phrase 'blue cool widgets' and I search for 'blue widgets' it is unable to locate that even though blue and widgets both exist in my keyword phrase.

    Could it be possible that if I search for a phrase with 2 or even 3 words in it, then it can find any keyword phrase on my page in which both/all words of phrase being searched exist?

    I would very much appreciate if this solution can be found.

    Thank you.
    Last edited by frank5050; 01-08-2012 at 02:12 AM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    More simple stuff. But note that this solution will find the words in either order. (Indeed, try "blue widget" to see what I mean.)

    Maybe it's time to try writing a little code yourself to only find the words in the given order?
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function checkForWord( wordField )
    {
        var form = wordField.form;
        var words = wordField.value.replace(/^\s+/,"").replace(/\s+$/,"").toLowerCase().split(" ");
    
        var inputs = form.getElementsByTagName("input");
        for ( var e = 0; e < inputs.length; ++e )
        {
            var field = inputs[e];
            if ( field.type == "checkbox" )
            {
                var fcnt = 0;
                var cbtext = field.value.toLowerCase();
                for ( var w = 0; w < words.length; ++w )
                {
                    if ( cbtext.indexOf(words[w]) >= 0 )
                    {
                        ++fcnt;
                    }
                }
                if ( fcnt == words.length ) 
                {
                    field.checked = true;
                } else {
                    // OPTIONAL, if you do NOTwant to clear previously checked boxes, omit next line:
                    field.checked = false;
                }
            }
        }
    }
    </script>
    </head>
    <body>
    <form onsubmit="return false;">
    Type a word: <input name="word" onchange="checkForWord(this);" />
    <hr>
    <label>
        <input type="checkbox" name="keywords" value="An apple a day keeps the doctor at bay">
        An apple a day keeps the doctor at bay
    </label></br/>
    <label>
        <input type="checkbox" name="keywords" value="All work and no play makes Jack">
        All work and no play makes Jack
    </label></br/>
    <label>
        <input type="checkbox" name="keywords" value="When in the course of inhuman events...">
        When in the course of inhuman events...
    </label></br/>
    <label>
        <input type="checkbox" name="keywords" value="blue cool widgets">
        blue cool widgets
    </label></br/>
    <label>
        <input type="checkbox" name="keywords" value="widgets can be blue">
        widgets can be blue
    </label></br/>
    </form>
    </body>
    </html>
    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,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    My understanding is that he wants to find the words or part-words which exist in any order, and even when separated by another (unspecified) word. wid blu blu wid

    A small improvement (if just a space is entered all the boxes are checked)

    Code:
    function checkForWord( wordField ){
    if (/^\s/.test(wordField.value)) {
    alert ("Invalid entry starts with a space - please retype");
    document.forms[0].word.value = "";
    return false;
    }
    also perhaps advise if the word was not found:-

    Code:
    var found = false;
    ....
    if ( fcnt == words.length )   {
    field.checked = true;
    found = true;
    ....
    
    if (!found) {
    alert ("The word " + wordField.value + " was not found");
    }
    document.forms[0].word.value = "";  // whether the word was found or not clear the input field ready for next search
    
    }
    </script>
    Last edited by Philip M; 01-09-2012 at 09:38 AM.

    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, I did handle the "entry starts with space" problem:
    Code:
    var words = wordField.value.replace(/^\s+/,"").replace(/\s+$/,"").toLowerCase().split(" ");
    The two replace calls there "trim" the input text.

    But I didn't consider the case of nothing but a space entered.

    This whole problem seems contrived and artificial. I can't think of a practical use for it. And I still don't know if a subsequent entry *should* clear the existing already-checked boxes.
    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.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    A further improvement (strip leading and trailing spaces at the outset):-

    Code:
    function checkForWord( wordField ){
    wordField.value = wordField.value.replace(/^\s+/,"").replace(/\s+$/,"");
    if (wordField.value.length <1) {
    alert ("Please type in a word");
    return false;
    }
    var found = false;
    var form = wordField.form;
    var words = wordField.value.toLowerCase().split(" ");
    ......
    I have to say that I do not agree that the problem is contrived. Surely it offers the user the possibility to select all the titles of books containing "widget" and/or "apple", and presumably place an order for them. Or perhaps show further information about them. But as so often the OP offers not much guidance and leaves us to guess what he really wants.
    Last edited by Philip M; 01-10-2012 at 09:29 AM.

    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.

  • #9
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, Pedant and Philip, you both are master coders and I appreciate that very much. It's my privilege to have both of you working on this problem for me (I understand this is not much of a problem for you guys). Thanks again.

    As it seems via initial testing that Old Pedant's second solution improves the search as desired. I will put his code to real test (which includes 15000 check boxes on one page), and then post the overall result. I have a feeling it will work out fine.

    The issue of entering just the space in the form field isn't an issue really since I don't intend to do so.

    Just for sake of clarity, In a nut-shell this is what I'm striving to do.

    ---------------------------------------------
    I would like to be able to search for a single word or a phrase and as long as "all the words" of the phrase being searched are present next to a checkbox, then the box gets checked.
    ---------------------------------------------

    I will post my findings after further testing.

    Thanks a bunch for your dedication towards helping others.

    Frank

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    15000 checkboxes on one page?
    It will take the user a long time to scroll through that lot!

    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.

  • #11
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    While I put this whole thing to some real testing (result of which I will post here), here's a tiny add-on I would like to request to the second script devised by Old Pedant (post #5).

    If we could have a counter next to the input form field which displays the total count of all the keywords found for a particular search, I think that would make this script even more useful for us.

    Thank you in advance.

  • #12
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    15000 checkboxes on one page?
    It will take the user a long time to scroll through that lot!
    You are right, 15000 is a lot, hence the enormity of the problem for us. The good news is, I have already tried Old Pedant's first script for 15000 checkboxes and though it takes long for the page to load (and all the sluggishness that comes with a large webpage), believe or not, the script works fantastically.

    So imagine the relief it is for us for this script to be able to handle tens of thousands of entries. We'd be truly sweating without it.

  • #13
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Any one of you master coders is more than welcome to make the enhancement of a counter (of matches found) next to the input field.

    Thanks.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by frank5050 View Post
    Any one of you master coders is more than welcome to make the enhancement of a counter (of matches found) next to the input field.

    Thanks.
    You ought to be able to make this simple enhancement yourself!

    Code:
    var counter= 0;
    function checkForWord( wordField ){
    Code:
    if ( fcnt == words.length )   {
    field.checked = true;
    found = true;
    counter ++;
    document.getElementById("Counter").value = counter;
    }
    Code:
    Type a word: <input name="word" onchange="checkForWord(this);" /> <input type = "text" id = "Counter"> 
    The counter shows the cumulative total of matches from all the searches (say widget and apple). If you want another counter showing the number of matches on the last search it would be easy to add that. Yes? Hint - declare the second counter within the function
    Last edited by Philip M; 01-10-2012 at 05:58 PM.

    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.

  • #15
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I am not clear on how to implement your code.

    Do I put:

    if ( fcnt == words.length ) {
    field.checked = true;
    found = true;
    counter ++;
    document.getElementById("Counter").value = counter;
    }

    inside the code created by Pedant?

    Upon doing so, it doesn't seem to work. Also, I am just looking for a text counter, but seems like your code creates another input field?

    As for the counter, what I'm looking for is, "when a word or phrase is typed into the text field (in Pedant's code), if there are matches found then the number of found matches for that particular search is displayed next to the input field"

    Yes, I'm a noob with Javascript, but I'll try to learn more as time goes on.
    Thanks


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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