Apply a jQuery whitespace trim to an adminhtml filter input

Question

My goal is to load a simple jQuery function to trim any whitespace in an admin backend filter input. The use case involves a scanner inputting codes with spaces that will turn up no results.

I have tried a couple methods involving loading the script through an XML layout update as a phtml block, or because the filter is under adminhtml/ui_component, updating the column to load in my script as a component. The methods I have attempted have failed for one reason or another, whether because the load order is failing because I've failed to properly use requirejs in this case, or because the script cannot access the element.

The script is:

define([
 'jquery'
], 
$(function () {
 $("input[name='code']").bind('input', function(){
 $(this).val(function(_, v){
 return v.replace(/\s+/g, '');
 });
 });
 })

In essence, what is the best/recommended way to load this script so that it will strip whitespace out of an adminhtml filter?

Answer 1

Can you try with this script instead ? I should work for you. I have done 2 things :

• Added the domReady to wait for the DOM to be loaded
• Define $ to be jQuery

This is it :

require([
 'jquery',
 'domReady!'
], function ($) {
 $("input[name='code']").bind('input', function(){
 $(this).val(function(_, v){
 return v.replace(/\s+/g, '');
 });
 });
});

• lasalsaverde: Thank you! I'll mark you as the answer very shortly. Is loading the script at a phtml file between script tags and inserting it into the XML acceptable for loading this or is there a better method for this case?
• Taschert: You can add this in the phtml or you can call a js script from the layout.xml. Both ways are fine.