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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation Auto Complete Text Boxes Based On Value Entered

    Hello! I need some help here. I need to pre-populate a name and a phone number box based on what's entered in the employee id box.

    By entering in the employee id -

    EMPLOYEE ID: [JOHN R]

    It automatically fills in -

    Employee Name: [John Roberts]
    Employee Phone: [1234567890]

    Thanks.

  • #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
    AJAX. Pure and simple. (Unless your company has, say, fewer than 500 employees? In which case you could do it all in the browser if you created the page with an array of all the employees. Dare we assume what your level of expertise is in server-side and database code?)
    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
    Jan 2012
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    AJAX. Pure and simple. (Unless your company has, say, fewer than 500 employees? In which case you could do it all in the browser if you created the page with an array of all the employees. Dare we assume what your level of expertise is in server-side and database code?)
    The company in question has fewer than 500 employees and would like to develop in javascript. Thanks!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Okay, but where will you get the list of employees from? I would *assume* you would need to go to the company database to get it, no? So that means you have to write some server side code (PHP/ASP/JSP) to get the names and ids and phone numbers out of the database and send them to the HTML/JavaScript code.

    You have to be able to do that before you can worry about the JavaScript code (which is dirt simple).
    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.

  • #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
    And what do you want to do if the searcher doesn't *know* the user id? But knows, say, just the first name? Or just the last name?
    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
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    And what do you want to do if the searcher doesn't *know* the user id? But knows, say, just the first name? Or just the last name?
    I would like to have a solution that would simply allow two text boxes to be filled in based on what was entered in the first box. If you could provide an example with some example variables it would allow me to build off of it. Thank you very much for your help.

  • #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
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function Person( nm, ph )
    {
        this.name = nm;
        this.phone = ph;
    }
    
    // people should be here alphabetically, if possible
    var people = [
       new Person("Adam Sandler", "800-111-2222" ),
       new Person("Artful Dodger", "866-666-6666" ),
       new Person("George Washington", "111-111-1111" ),
       new Person("Harry Truman", "333-555-1111" ),
       new Person("John Richards", "888-999-0000" ),
       new Person("John Robertson", "555-731-8811" )
    ];
    
    function findName( inp )
    {
        var form = inp.form;
        form.personName.value = "";
        form.phoneNumber.value = "";
        var sofar = inp.value.toLowerCase();
        for ( var p = 0; p < people.length; ++p )
        {
            var person = people[p];
            if ( person.name.toLowerCase().indexOf(sofar) == 0 )
            {
                form.personName.value = person.name;
                form.phoneNumber.value = person.phone;
            }
        }
    }
    </script>
    </head>
    <body>
    <form>
        Search for: <input name="search" onkeyup="findName(this);" />
        <hr/>
        Name: <input name="personName" readonly />
        <br/>
        Phone: <input name="phoneNumber" readonly />
    </form>
    </body>
    </html>
    It doesn't work well to only use two text boxes.

    Try this, you'll see why.

    Type in "A" and you get "Adam Sandler".
    But then type "r" and you get "Artful Dodger".
    Or type "J" or "Jo" or "John" or "John R" and you get "John Richards".
    When you finally type "John Ro" then you get "John Robertson".

    In other words it finds first name that matches all letters typed so far. You couldn't do that with a single text box, as the answer (e.g., "Adam Sandler") would keep appearing as soon as you typed the "A", etc.
    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.

  • Users who have thanked Old Pedant for this post:

    mustangkid (03-23-2012)

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function Person( nm, ph )
    {
        this.name = nm;
        this.phone = ph;
    }
    
    // people should be here alphabetically, if possible
    var people = [
       new Person("Adam Sandler", "800-111-2222" ),
       new Person("Artful Dodger", "866-666-6666" ),
       new Person("George Washington", "111-111-1111" ),
       new Person("Harry Truman", "333-555-1111" ),
       new Person("John Richards", "888-999-0000" ),
       new Person("John Robertson", "555-731-8811" )
    ];
    
    function findName( inp )
    {
        var form = inp.form;
        form.personName.value = "";
        form.phoneNumber.value = "";
        var sofar = inp.value.toLowerCase();
        for ( var p = 0; p < people.length; ++p )
        {
            var person = people[p];
            if ( person.name.toLowerCase().indexOf(sofar) == 0 )
            {
                form.personName.value = person.name;
                form.phoneNumber.value = person.phone;
            }
        }
    }
    </script>
    </head>
    <body>
    <form>
        Search for: <input name="search" onkeyup="findName(this);" />
        <hr/>
        Name: <input name="personName" readonly />
        <br/>
        Phone: <input name="phoneNumber" readonly />
    </form>
    </body>
    </html>
    It doesn't work well to only use two text boxes.

    Try this, you'll see why.

    Type in "A" and you get "Adam Sandler".
    But then type "r" and you get "Artful Dodger".
    Or type "J" or "Jo" or "John" or "John R" and you get "John Richards".
    When you finally type "John Ro" then you get "John Robertson".

    In other words it finds first name that matches all letters typed so far. You couldn't do that with a single text box, as the answer (e.g., "Adam Sandler") would keep appearing as soon as you typed the "A", etc.
    This is close, but no cigar. First box should be employee id with the bottom two being name and phone so a total of three variables:

    Code:
    new Person("John Robertson", "555-731-8811" )
    Should be? ..

    Code:
    new Person("Employee ID", "John Robertson", "555-731-8811" )
    Therefore an employee id will populate the bottom two boxes. Thanks.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    So couldn't you change the code yourself???

    It's a trivial change:

    I did fix a minor bug, too. If you backspaced to nothing, it was always picking the last person. It now picks no one.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function Person( id, nm, ph )
    {
        this.empid = id;
        this.name = nm;
        this.phone = ph;
    }
    
    // people should be here alphabetically by ID, if possible
    var people = [
       new Person("ADAM S", "Adam Sandler", "800-111-2222" ),
       new Person("ART D", "Artful Dodger", "866-666-6666" ),
       new Person("GEO W", "George Washington", "111-111-1111" ),
       new Person("BUCK S", "Harry Truman", "333-555-1111" ),
       new Person("J RICH", "John Richards", "888-999-0000" ),
       new Person("JOHN R", "John Robertson", "555-731-8811" )
    ];
    
    function findName( inp )
    {
        var form = inp.form;
        form.personName.value = "";
        form.phoneNumber.value = "";
        var sofar = inp.value.toLowerCase();
        if ( sofar.length == 0 ) return; // do nothing if no input
    
        for ( var p = 0; p < people.length; ++p )
        {
            var person = people[p];
            if ( person.empid.toLowerCase().indexOf(sofar) == 0 )
            {
                form.personName.value = person.name;
                form.phoneNumber.value = person.phone;
                return;
            }
        }
    }
    </script>
    </head>
    <body>
    <form>
        Search for: <input name="search" onkeyup="findName(this);" />
        <hr/>
        Name: <input name="personName" readonly />
        <br/>
        Phone: <input name="phoneNumber" readonly />
    </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.


  •  

    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
    •