In today’s fast-paced digital environment, time is money. Business professionals and tech enthusiasts alike seek ways to optimize workflows and reduce unnecessary screen interactions. One simple yet effective solution is implementing keyboard shortcuts to focus on search fields quickly, minimizing the need for mouse navigation.

Btw: You can read about shortcuts in EspoCRM in one of our article or directly in official documentation.

Why Keyboard Shortcuts Improve Productivity

Using keyboard shortcuts for search can significantly enhance your productivity by allowing instant access to search functionalities. This approach not only saves time but also minimizes disruptions during workflows, especially when multitasking or working on complex projects.

Benefits of Custom Search Shortcuts

• Speeds up user interactions by reducing mouse dependency
• Provides a seamless, intuitive experience for users
• Helps in maintaining focus during task execution
• Easy to implement with minimal coding effort

How to Implement Custom Search Keyboard Shortcuts

Implementing a shortcut such as Ctrl + K or / for focusing on search fields can be achieved through simple JavaScript coding. Here’s an overview of the process:

1. Listening for Keyboard Events

Use JavaScript to detect specific key combinations, like Ctrl + K or /, ensuring they do not interfere with existing browser shortcuts or form inputs.

2. Focusing on the Search Field

Upon detecting the shortcut, trigger game focus on the search input element. This can be done by selecting the element and calling the focus() method.

3. Customizing and Extending

Developers can easily extend this functionality by modifying the JavaScript code or integrating it into existing systems, like a CRM or internal dashboard.

Code Snippet for DIY

Below is a sample JavaScript snippet that binds keyboard shortcuts to focus on a global search input:

require(['views/site/header'], (HeaderView) => {

    const defaultAfterRender = HeaderView.prototype.afterRender;

    HeaderView.prototype.afterRender = function () {
        defaultAfterRender.call(this);

        if (window.__globalSearchShortcutBound) {
            return;
        }

        window.__globalSearchShortcutBound = true;

        $(document).on('keydown', (e) => {
            const key = e.key ? e.key.toLowerCase() : '';

            const isCtrlK = (e.ctrlKey || e.metaKey) && key === 'k';
            const isSlash = key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey;

            if (!isCtrlK && !isSlash) {
                return;
            }

            const $target = $(e.target);
            const isTyping = $target.is('input, textarea, select') ||
                $target.attr('contenteditable') === 'true';

            if (isSlash && isTyping) {
                return;
            }

            e.preventDefault();

            const $input = $('.global-search-input').first();

            if ($input.length) {
                $input.trigger('focus');
            }
        });
    };
});

{
  "scriptList": [
        "__APPEND__",
        "client/custom/modules/dubas-shortcuts/lib/init.js",
        "client/custom/modules/dubas-shortcuts/global-search-shortcut.js"
    ],
    "developerModeScriptList": [
        "__APPEND__",
        "client/custom/modules/dubas-shortcuts/global-search-shortcut.js"
    ]
}

This snippet provides an efficient way for users to quickly access search functionalities without disrupting their workflow.

You can also simply download our extension.

Conclusion

Integrating customizable keyboard shortcuts for search in business applications offers a straightforward path to boosting productivity. Whether you’re developing internal tools or enhancing existing platforms, these simple enhancements can deliver significant time savings and improve user experience. By leveraging easy-to-implement JavaScript solutions, professionals can create more efficient and user-friendly digital environments, ultimately streamlining daily operations and enabling focus on what truly matters.