Question

I have an jQuery.autocomplete field presenting a limited range of decimal numbers. Ex:

var the_list = ['+2.23', '+1.10', '-1.10', '-2.00', '-3.00',]

But I allow the user to enter data like ‘2.3’ and ‘-5’. At least I can get partial matches to help me when i start typing for these values.

But what if I (or someone else with clumsy fingers) enter ‘2,3’ (with a comma instead of a decimal point). As soon as I hit the comma I will get no matches. Can this be fixed in some way?

My thought was to create a handler on keydown-event witch replaces the comma with a decimal point before the autocomplet-handler gets started. I have tried to add an eventhandler to the field, but then the autocompleter stops working all together, and there seems to be no way to specify the order of execution of the handlers either.

Please inform me how this could be done, if at all possible. Any suggestions welcome.

Answer 1

Many thanks to DismissedAsDrone by which help I managed to get my stuff working. I made a slight modification to the suggested solution though since I wanted to update the actual value of the inputbox, not just the value used in the search.

Here is what I have done

I started out with this autocomplete-plugin (v1.0.2) of jQuery.

I added a preFilter option (1 line of code) to the $.Autocompleter.defaults object code as:

$.Autocompleter.defaults = {
    inputClass: "ac_input",
    ...,
    preFilter: function(value) { return value; },
    ...

In the onChange function I added the usage of preFilter (4 lines of code) after the var currentValue … row:

var currentValue = $input.val();

if ( options.preFilter(currentValue) != currentValue ) {
    $input.val(options.preFilter(currentValue));
    return;
}

HowTo use it

To make use of the new option to solve my specific problem I used it like this:

$(function() {
    $("#the_inputfield").autocomplete(the_data, {
        minChars: 0,
        max: 100,
        selectFirst: false,
        matchContains: true,
        preFilter: function(value) { return value.replace(',','.'); },
    });
});