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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Using the jQuery Framework to find input match on a keyup event in an input box

    Hello,

    I really need your folks help with this one,

    I am not really sure as to what the technology is called for this, but you know how in some websites you start typing some value in an input box and the nearest result becomes immediately highlighted/selected?

    I assume that it captures this info on some sort of a key up event. I'd like to have the same concept applied to my example,

    so that if for example I type in the value '698'in my input box, jQuery would find, select and apply my css class titled:.selected to the value (same as if I were to click and select it. I think this addon would be neat and purposeful to both the user and the eye.

    I guess further to say that, once the css class applied, the function should also move the scroll position to the detected value.

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    
    <style type="text/css">
    * {
        font-family: Segoe UI;
        font-size: 9pt;
    }
    #refdocs {
        border: 0;
        width: 100%;
        height: auto;
        padding-left: 2px;
    }
    #refdocs_main {
        border: 1px solid rgb(170,170,170);
        width: 179px;
        overflow: hidden;
        margin-top: 1px;
    }
    #refdocs_input{
        border-bottom: 1px solid rgb(170,170,170);
        height: 20px;
    
    }
    #refdocs_wrapper{
        height: 100px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #refdocs_list {
        width: 100%;
    }
    #refdocs_list ul {
        margin: 0;
        padding: 0px;
        list-style-type: none;
    }
    #refdocs_list li {
        cursor: default;
        padding: 2px;
    }
    .selected {
        background: rgb(228,228,228);
    }
    
    </style>
    
    <script type="text/javascript">
    window.onload = function() {
    
        $('#refdocs_list ul li').click(function () {
            $('#refdocs_list ul li').removeClass('selected');
            $(this).addClass('selected');
            document.getElementById('refdocs').value = $(this).text()
        });
    
    
    
    
    }
    </script>
    
    </head>
    
    <body>
    
        <div id="refdocs_main">
    
            <div id="refdocs_input"><input type="text" id="refdocs"></div>
    
            <div id="refdocs_wrapper">
    
                <div id="refdocs_list">
                    <ul>
                        <li>9094203</li>
                        <li>9279863</li>
                        <li>9023698</li>
                        <li>8993127</li>
                        <li>9037891</li>
                    </ul>
                </div>
    
            </div>
    
        </div>
    
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    This is more find-as-you-type than auto-complete. Here's a modified script (only added a new function, didn't modify anything else) that does part of what you asked for.
    Code:
    <script type="text/javascript">
    window.onload = function() {
        $('#refdocs_list ul li').click(function () {
            $('#refdocs_list ul li').removeClass('selected');
            $(this).addClass('selected');
            document.getElementById('refdocs').value = $(this).text()
        });
    
    /* find item in list as you type */
        $("#refdocs").keyup(function(){ // onkeyup for the input field
            var pattern = new RegExp($(this).val()); // store current value of input field as a RegExp pattern (though it could just be a string)
            $("#refdocs_list li").each(function(){ // go through each item and try to match the pattern
                var text = $(this).text();
                if(text.match(pattern) !== null){
                    $(this).addClass("selected"); // pattern found - set .selected
                }
                else{
                    $(this).removeClass("selected"); // pattern not found - remove .selected
                }
            });
        });
    
    }
    
    </script>
    What I've left out is the part where it scrolls to the position of the selected item. I can see where you'd want this if you had 10 or more items in your list.

  • Users who have thanked kansel for this post:

    jason_kelly (04-06-2014)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Wow!

    Works like a charm! Thanks so much Kansel. Your a lifesaver.

    One more question for you, if I clear all the values in the input box after searching for a value, it leaves all the li's still highlighted.

    Is there anyway to modify the code, such that it would return them all to their normal color (white)?

    I'm sorry for asking so much. This level of javascript is not yet learned in my brain and I am not quite sure where to start modifying without breaking your awesome code.

    Thanks in advance,

    Cheers,

    Jay

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    Here's a modified version that checks that the input field isn't blank (in kind of a roundabout way).
    Code:
    <script type="text/javascript">
    window.onload = function() {
        $('#refdocs_list ul li').click(function () {
            $('#refdocs_list ul li').removeClass('selected');
            $(this).addClass('selected');
            document.getElementById('refdocs').value = $(this).text()
        });
    
    /* find item in list as you type */
        $("#refdocs").keyup(function(){ // onkeyup for the input field
            var pattern = new RegExp($(this).val()); // store current value of input field as a RegExp pattern (though it could just be a string)
            $("#refdocs_list li").each(function(){ // go through each item and try to match the pattern
                var text = $(this).text();
                if(text.match(pattern) !== null && "".match(pattern) === null){
                    $(this).addClass("selected"); // pattern found - set .selected
                }
                else{
                    $(this).removeClass("selected"); // pattern not found or pattern is empty - remove .selected
                }
            });
        });
    
    }
    
    </script>
    The additional code (in green) does this check by comparing the input field to an empty string. This comparison must fail (=== null) in order for the items to be highlighted. If the input field is empty then the highlight will be removed for all items.

    There are of course other ways to accomplish this. I chose this way as the easiest modification to existing code based on how I built the initial function.

  • Users who have thanked kansel for this post:

    jason_kelly (04-09-2014)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I recommend to use $(document).ready than window.onload and to use event delegation and to use .on() function.
    Code:
    $(document).ready(function() {
    
    /* find item in list as you type */
        $("#refdocs").on('keyup', function(){ // onkeyup for the input field
            var pattern = new RegExp($(this).val()); // store current value of input field as a RegExp pattern (though it could just be a string)
    
            $('refdocs_list li').each(function(){ // go through each item and try to match the pattern
                var $this = $(this),
                    text = $this.text();
    
                if (text.match(pattern) !== null && "".match(pattern) === null){
                    $this.addClass("selected"); // pattern found - set .selected
                }
                else{
                    $this.removeClass("selected"); // pattern not found or pattern is empty - remove .selected
                }
            });
        });
    
        $('refdocs_list').on('click', 'li', function(e) { //Event delegation, the click event is attached only once to the parent container
            var $this = $(this);
            $this.addClass('selected').siblings().removeClass('selected');
            document.getElementById('refdocs').value = $this.text();         
        }
    });
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    jason_kelly (04-09-2014)

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Thanks so very much to Kansel and Glen for the amazing effort and code examples. You guys are a lifesaver!


  •  

    Posting Permissions

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