Search code examples
jquerykeypressjquery-ui-autocomplete

Can you restrict entering invalid keystrokes with jQuery UI autocomplete combobox?


When using the jQuery UI autocomplete combobox, I would thought there would be an option to force only a valid key entry based on the list. Is there any way to not allow invalid keys, so you can only enter valid items in the list? Also, is there a way to set a default value of the combobox?

If my list has (C#, Java, Python)

I can start typing "abcds . ." and it lets me type it in. I want only valid entries to be allowed.


Solution

  • UPDATED 2

    Tested on
    Internet Explorer 6 and later
    Chrome
    Firefox
    Opera
    

    Demo: http://so.lucafilosofi.com/can-you-restrict-entering-invalid-keystrokes-with-jquery-ui-autocomplete-combobox

    Core JavaScript code:

        var Tags = ['csharp', 'java', 'python' ];
    
        $("#autocomplete").keypress(function(event) {
            //Firefox workaround..
            if (!event.which &&
                ((event.charCode || event.charCode === 0) ? event.charCode: event.keyCode)) {
    
                event.which = event.charCode || event.keyCode;
            }
            var charCode = String.fromCharCode(event.which).toLowerCase();
            var search_val = this.value + charCode;
            var x = search_val.length - 1;
            var match;
            for (var i = 0; i < Tags.length; i++) {
                if (charCode == Tags[i][x] && Tags[i].indexOf(search_val) != -1) {
                    match = true;
                }
            }
            //Backspace functionality added!
            if (!match && event.which != 8 ) {
                event.preventDefault();
            }
        });
    

    NOTE:

    1. force only valid key entry based on the list;
    2. set a default value;
    3. lightweight implementation ;-)

    Let me know!