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

Question

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.

Bronk

Answer 1

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!

Omphalos

@aSeptik - it seems it works on ie and chrome . . perfect . . . this doesn't work on Firefox 3.6.4 – Bronk

hey bro i have fixed it seams like firefox don't hate the event.keykode! but don't warry now is fixed! ;-) let me know! see the updated demo link! PS: test it local not on jsbin! it suck with explorer! – Omphalos

it now seems to work on firefox also so thanks for that. The one thing missing here (only in firefox) is support for the backspace key as it seems suboptimal that you can't go back . .thoughts? backspace seems to work in IE and Chrome – Bronk

Answer 2

After setting up your autocomplete, use this code to prevent the space character and equals character (ASCII code 32 and 61). And to set a default;

     $("#myautocompletectrl").keypress(function (e) {
        if (e.which == 32 | e.which == 61) {
          e.preventDefault();
        }
     }).val('mydefaultvalue');

It acts like the key was never pressed (as you say you wanted).

Tested on Firefox 3.63 and jQuery UI 1.8 Autocomplete.

Also, if you find that you additionally want to implement the mustMatch functionality in the jQuery UI 1.8 autocomplete, then look here: How to implement "mustMatch" and "selectFirst" in jQuery UI Autocomplete?

EDIT: I see you've already read and commented on my post.... :)

Cannon

Answer 3

Your question also appears to be a common request on the jQuery plugin forum and in How to implement “mustMatch” and “selectFirst” in jQuery UI Autocomplete people have been discussing this issue.

The accepted answer for this question works. So Doc Hoffiday's solution really deserves the reputation points.

Alternatively you could use Jörn Zaefferer's autocomplete with the "mustMatch" option.

<script type="text/javascript">
$(document).ready(function(){
    var availableTags = ["csharp", "java", "python"];
    $("#tags").autocomplete(availableTags, {
        mustMatch: true
    });
});
</script>

<input id="tags" />

UPDATE

Initially, I had missed that you wanted a combobox solution. Thanks for making that clearer.

I have tweaked the combobox example.

I needed to make a few changes to make it actually work within a form. I introduced a short delay to ensure that the events happened in the right order. Other than that I inserted Doc Hoffiday's solution.

I used a "change" event, but you might also be able to get something working using the "close" event. I hate to say it, but my experience so far of working with the new jQuery UI autocomplete is that it is a bit unreliable. Things seem to mess up when you have more than one type of event callback configured.

UPDATE 2

I added a new custom selector based on Doc Hoffiday's solution so that the entered text is not overwritten when it matches the beginning of valid option. I have also updated it so that the source to restrict the options offered to more exact matches. I hope this is closer to your requirements.

I have tweaked my previous combobox example.

Idolatry

@Mark McLaren - am trying to get this to work for the combobox. i updated the link in the question to clarify – Bronk

@Mark McLaren - i tried this in both chrome and firefox and it allows me to type "jjjjj . ." so it doesn't seem to be restricting my keystrokes – Bronk

@Mark McLaren - i dont want it to clear the complete input when i enter an invalid key i just want it to act like that key was never pressed. For example, if i enter "java" and then enter "a', the combo should stay on "java" – Bronk

Answer 4

$("#myautocompletectrl").keypress(function (e) {
    if (e.which == 32 | e.which == 61) {
      e.preventDefault();
    }
 }).val('mydefaultvalue');

it works for me... thank youuu :D

Hugely