SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    ********* Articles ArticleBot's Avatar
    Join Date
    Apr 2001
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Article Discussion

    This is an article discussion thread for discussing the SitePoint article, "Make Life Easy With Autocomplete Textboxes"

  2. #2
    Kester
    SitePoint Community Guest
    There is a closing bracket missing here at the end:

    default:
    textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);

  3. #3
    Jamie
    SitePoint Community Guest
    An interesting use of Javascript to make life easier for the user. However, I don't understand where the values in the array come from. Please explain. Also, a working example would be beneficial. Thanks.

  4. #4
    carlos
    SitePoint Community Guest
    I don't know if it matters, but you can make this auto-complete function case-insensitive by making the string in the area lowercase (or upper) and the sText. For example: arrValues[i].toLowerCase().indexOf(sText.toLowerCase())

  5. #5
    Plebian
    SitePoint Community Guest
    Jamie suggested a working example would be beneficial - there seems to be one at the author's own homepage: http://www.nczonline.net/

    If you go to the downloads section there is a Zip file with the example used in this article.

  6. #6
    matt
    SitePoint Community Guest
    add an extra ) on the end of line 86

    charCode);

    becomes

    charCode));

    :)

  7. #7
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Hyderabad
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was a nice one. Good work.

  8. #8
    Emilio
    SitePoint Community Guest
    For Case!

    function autocompleteMatch (sText, arrValues) {

    for (var i=0; i < arrValues.length; i++) {
    if (arrValues[i].indexOf(sText.toLowerCase()) == 0) {
    return arrValues[i].replace(sText.toLowerCase(), sText);
    }
    }

    return null;

    }

  9. #9
    John
    SitePoint Community Guest
    IMHO, in IE, this code will not work if the text box is imbedded in a form. event.keyCode returns "undefined." In IE, you can use window.event.keyCode in the autocomplete function to get the code. (In the example, the text box appears in the page, but no form.) After correcting per Matt's post, the sample code works in Firefox "as is," and works in IE (but not in a form).

  10. #10
    UrbanSoot
    SitePoint Community Guest
    RE: For Case!

    Your function caused an error... Here is the working version:

    function autocompleteMatch (sText, arrValues) {

    for (var i=0; i < arrValues.length; i++) {
    lTxt = sText.toLowerCase();
    if (arrValues[i].indexOf(lTxt) == 0) {
    return arrValues[i];
    }
    }

    return null;

    }

  11. #11
    Emilio
    SitePoint Community Guest
    RE: Your function caused an error...

    Your function also causes an error, and it is for the same reason mine does. For some reason I did not copy the function over properly. Here is the working version:

    function autocompleteMatch (sText, arrValues) {

    for (var i=0; i < arrValues.length; i++) {
    if (arrValues[i].indexOf(sText.toLowerCase()) == 0) {
    return arrValues[i].replace(sText.toLowerCase(), sText);
    }
    }

    return null;

    }

    The previous function returned an error because you need to give the function the index of the array ( arrValues[i].indexOf... ). Your function is also different than mine in that your function replaces the entire input string back to whatever is in the array, while mine keeps what the user has inputted and appends what is in the array.

    For example: mine- a user enters R and the function returns Red.
    Yours - a user enters R and the function returns red.

    Both work so it is just a matter of preference.

  12. #12
    SitePoint Enthusiast Everah's Avatar
    Join Date
    Mar 2004
    Location
    East Bay Area, CA, USA
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried all three versions of autocompleteMatch and all three returned an error. Any ideas?

  13. #13
    Max
    SitePoint Community Guest
    There's a missing parenthesis; here's the corrected line, in the autocomplete function:

    textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));

    Also, my javascript debugger complained on the funny quotes used in the browser detection code...I'd replace with regular double quotes.

    Max

  14. #14
    Mad
    SitePoint Community Guest
    you need to use the "i" variable in your loop on the "autocompleteMatch" function :

    for (var i=0; i < arrValues.length; i++) {
    if (arrValues[i].indexOf(sText.toLowerCase()) == 0) {
    return arrValues[i].replace(sText.toLowerCase(), sText);
    }
    }

  15. #15
    mARTINv
    SitePoint Community Guest
    Brilliant

  16. #16
    alots
    SitePoint Community Guest
    I tested this example and a i gave the mistake:

    object is expected when i put some char... in the field...

  17. #17
    Anonymous
    SitePoint Community Guest
    same error for me, object expected

  18. #18
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by replacing
    Code:
    var isOpera = navigator.userAgent.indexOf(”Opera”) > -1; 
    var isIE = navigator.userAgent.indexOf(”MSIE”) > 1 && !isOpera; 
    var isMoz = navigator.userAgent.indexOf(”Mozilla/5.”) == 0 && !isOpera;
    with
    Code:
    var isOpera = navigator.userAgent.indexOf('Opera') > -1; 
    var isIE = navigator.userAgent.indexOf('MSIE') > 1 && !isOpera; 
    var isMoz = navigator.userAgent.indexOf('Mozilla/5.') == 0 && !isOpera;
    fixes the problem

  19. #19
    rebugger
    SitePoint Community Guest
    textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);

    One missing ) at the end....

  20. #20
    Carlos Eduardo Cruz
    SitePoint Community Guest
    function autocomplete(oTextbox, oEvent, arrValues) {

    switch (oEvent.keyCode) {
    case 38: //up arrow
    case 40: //down arrow
    case 37: //left arrow
    case 39: //right arrow
    case 33: //page up
    case 34: //page down
    case 36: //home
    case 35: //end
    case 13: //enter
    case 9: //tab
    case 27: //esc
    case 16: //shift
    case 17: //ctrl
    case 18: //alt
    case 20: //caps lock
    case 8: //backspace
    case 46: //delete
    return true;
    break;

    default:
    textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));


    var iLen = oTextbox.value.length;

    var sMatch = autocompleteMatch(oTextbox.value, arrValues);

    if (sMatch != null) {
    oTextbox.value = sMatch;
    textboxSelect(oTextbox, iLen, oTextbox.value.length);
    }

    return false;
    }
    }

  21. #21
    Izzy
    SitePoint Community Guest
    To the auhor -

    At least make sure your code works before you post it. There were 2 errors in your code I had to fix.

  22. #22
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    USA
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question...

    I know this is an old thread but...

    Question: How can I alter this script so that i can type in one field and autocomplete multiple fields? i.e. If i begin typing in the 'Firstname' field can it autocomplete the 'LastName' field.

    Or, alternatively, how can I use a <select> on field 1 and have the resulting selection populate the rest of the fields from an array? i.e. Select 'phone' and have the firstname, lastname, etc. fields automatically populated after the selection is made.

  23. #23
    max
    SitePoint Community Guest
    Hello,
    I was wondering how one would go about if one wanted to apply the "getDocumentById('textBoxid')and addEventListener" approach instead of using the onkeyPress. Hope you understand what I mean.

    I fail every attempt with this great script.

  24. #24
    jac
    SitePoint Community Guest
    What are the two errors? I can't spot them

  25. #25
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    checking the text box on delete

    I have implemented the sript and it works great for me.
    The only problem I have is when people enter information for instance: Violete and then delete the last e it the autocomplete will turn off and not add the selected e. ANY THOUGHTS ON HOW TO IMPLEMENT THAT CHANGE?


Bookmarks

Posting Permissions

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