How to change input text before matching
I have a jQuery.autocomplete field representing a limited range of decimal numbers. Example:
var the_list = ['+2.23', '+1.10', '-1.10', '-2.00', '-3.00',]
But I am allowing the user to enter data like "2.3" and "-5". At least I can get partial matches to help me when I start typing these values.
But what if I (or someone else with clumsy fingers) enter "2,3" (with a comma instead of a decimal point). Once I hit the comma, I won't get any matches. Could this be fixed in some way?
My thought was to create a handler in keydown-event witch instead of comma replace comma with decimal point before starting autocomplete. I tried adding an event handler to the field, but then autoplay stops working together and there seems to be no way to specify the order in which the handlers are executed.
Please advise me how this can be done, if at all possible. Any suggestions are greatly appreciated.
a source to share
Many thanks to DismissedAsDrone for making my stuff work. I made a slight modification to the suggested solution though, since I wanted to update the actual value of the input field, not just the value used in the search.
This is what i did
I started with this autocomplete jQuery plugin (v1.0.2).
I added the preFilter parameter (1 line of code) to the $ Autocompleter.defaults code like:
$.Autocompleter.defaults = {
inputClass: "ac_input",
...,
preFilter: function(value) { return value; },
...
In the onChange function, I added the use of preFilter (4 lines of code) after the var currentValue ... line :
var currentValue = $input.val();
if ( options.preFilter(currentValue) != currentValue ) {
$input.val(options.preFilter(currentValue));
return;
}
How to use it
To use the new feature 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(',','.'); },
});
});
a source to share
Assuming you are using the autocomplete jquery plugin found here: http://www.pengoworks.com/workshop/jquery/autocomplete.htm
Then modify the plugin file to change this:
function onChange() {
// ignore if the following keys are pressed: [del] [shift] [capslock]
if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ) return $results.hide();
var v = $input.val();
if (v == prev) return;
prev = v;
if (v.length >= options.minChars) {
$input.addClass(options.loadingClass);
requestData(v);
} else {
$input.removeClass(options.loadingClass);
$results.hide();
}
};
:
function onChange() {
// ignore if the following keys are pressed: [del] [shift] [capslock]
if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ) return $results.hide();
var v = $input.val();
v = fixBadChars(v);
if (v == prev) return;
prev = v;
if (v.length >= options.minChars) {
$input.addClass(options.loadingClass);
requestData(v);
} else {
$input.removeClass(options.loadingClass);
$results.hide();
}
};
function fixBadChars(v) {
// Customize this to your tastes
return v.replace(',','.');
};
I just took a look at the plugin, but I guess / hope it might work ...
// Start Editing Differences between them:
v = fixBadChars(v);
function fixBadChars(v) {
// Customize this to your tastes
return v.replace(',','.');
};
// End Edit
Here is a link to the plugin directly: Link: http://www.pengoworks.com/workshop/jquery/lib/jquery.autocomplete.js
a source to share