3

Pressing search button in jqgrid toolbar opens advanced search window. Pressing enter key does not start seach. To start search, search button needs to be clicked.

How to allow enter key press to start search like in clicking in search button ?

Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

6

To implement search on Enter key one have to implement binding to keydown event to any input fields and force searching on Enter. If you include jQuery UI jquery-ui.min.js then you can use $.ui.keyCode.ENTER instead of 13 for the better readability of the code.

The code can be like

$.extend($.jgrid.search, {
    // ... some other default which you use
    afterRedraw: function (p) {
        var $form = $(this), formId = this.id, // fbox_list
            bindKeydown = function () {
                $form.find("td.data>.input-elm").keydown(function (e) {
                    if (e.which === $.ui.keyCode.ENTER) {
                        $(e.target).change();
                        $("#" + $.jgrid.jqID(formId) + "_search").click();
                    }
                });
            },
            oldOnChange = p.onChange,
            myOnChange = function (param) {
                var $input = $form.find("td.data>.input-elm"), events;
                oldOnChange.call(this, param);
                if ($input.length > 0) {
                    events = $._data($input[0], "events");
                    if (events && !events.keydown) {
                        bindKeydown();
                    }
                }
            };
        p.onChange = myOnChange;
        bindKeydown.call(this);
    }
});

The demo demonstrate the code live.

Roman Pavlov
  • 401
  • 6
  • 7
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you. I tried demo. If focus in select element, enter key does not work. To reproduce, click in search button and press enter. Enter press is ignored. – Andrus Mar 12 '12 at 12:00
  • thank you. I tried demo and code from answer but problem persists. Clicked in seach button and pressed Enter. Enter press is ignored. – Andrus Mar 12 '12 at 17:49
  • @Andrus: You should first *set focus on the input field* (textbox or select) **before** you press "Enter". The user should first choose the field in which searching should be done, then optionally operation and at the end press "Enter" *in the input field* after he types the text of choose the select option. – Oleg Mar 12 '12 at 21:26
  • If search dialog is opened, group input field has focus. If focus is moved to search field to select or operaton select, enter is still ignored. Select element is also input element and enter should start searching in this element also. Esc key works properly. How to force enter to start search in select element also ? – Andrus Mar 13 '12 at 11:36
  • 1
    @Andrus: In [the demo](http://www.ok-soft-gmbh.com/jqGrid/SearchOnEnter.htm) enter on "select" do work. To verify this you can open search dialog, choose "Shipped via", then change *the searching value* from "Any" to "FedEx" and press "Enter" with the focus on select with "FedEx". In some web browsers you should press "Enter" twice: one to chose the select value and one more time to do the search. If you want another behavior the corresponding changes are very easy: you should just bind `keydown` to more selects, bind `change` or set focus on another field by opening of the dialog. – Oleg Mar 13 '12 at 11:49
  • @Andrus: If you would work only with the keyboard and use "Tab" to go to the next field, you will need only *one* press on "Enter" to start filtering. – Oleg Mar 13 '12 at 11:52
  • thank you. If grouping, column name or comparison operation select element has focus, enter press is ignored. How to bind enter to those select elements ? have those select elements fixed sames or some other idea ? – Andrus Mar 13 '12 at 17:46
  • 1
    @Andrus: I am sure that you can do this yourself. To select *any* select or and input you can use `$form.find("input,select")` instead of `$form.find("td.data>.input-elm")` which I use. In my opinion one should not do this, but if you have another opinion you can implement this very easy. If you want to choose and to make binding to some special selects you should just examine the dialog with Developer Tools or with Firebug to see which select has which class or which class has its `` parent. – Oleg Mar 13 '12 at 18:04
  • after clicking `Add group`, `Add subgrup`, `Delete rule` or `Delete group` button in advanced search dialog Enter and other keys are ignored. How set focus to added element or after delete remaining element to enable Enter and other keys? – Andrus Apr 08 '12 at 07:51
  • @Andrus: I can't reproduce what you write. All my attempts to press "Enter" in the input field for the data on [the demo](http://www.ok-soft-gmbh.com/jqGrid/SearchOnEnter.htm) works correctly. If I click "Add group", "Add subgrup", "Delete rule" or "Delete group" and then set focus on the data input (it's my imagination when "Enter" should work) work correctly. I am not sure that I understand context of the question "How set focus to added element". Are user work with keyboard only and used tab to press "Add subgrup"? Which field should receive focus after pressing "Enter" on "Add subgrup"? – Oleg Apr 08 '12 at 08:31
  • steps to reproduce in referenced demo: 1. in search dialog (a) press tab and enter or (b) click in add subgroup dialog. 2. Press enter. Observed: Enter, tab and all other keys are ignored. Expected: first added element should receive focus, keys should work. Dialog should accessible all times without using mouse. – Andrus Apr 08 '12 at 08:40
  • @Andrus: The question was about the support of "Enter". You current question is about the losing of focus after "Add subgrup". So you interpret any my answer about some keyboard support in jqGrid as full solution of keyboard navigation. It's not so. I shown in my answer that subclassing of `onChange` required to implement support of keyboard events in the data input field. To set focus after the pressing of "Add group", "Add subgrup", "Delete rule" or "Delete group" you can either modify the code of jqGrid or set binding on "click" event of any of buttons and set focus in your event handler. – Oleg Apr 08 '12 at 08:56
  • Thank you. Should we subclass button click events in the same way as you subclassed onChange event? – Andrus Apr 08 '12 at 09:07
  • @Andrus: It seems I found the solution of the problem with the lost focus. Because I think the problem could be interesting for other it's better you would open new question and I'll post my suggestion how to change jqGrid code to fix the problem. – Oleg Apr 08 '12 at 11:13
  • I posted question in http://stackoverflow.com/questions/10063539/how-to-make-jqgrid-advanced-search-dialog-keyboard-accessible – Andrus Apr 08 '12 at 14:27
  • In latest free jqgrid this code stopped working. How to force enter to invoke search in latest free jqgrid? – Andrus Apr 05 '16 at 21:03
  • I made small changes to make the code safer near the line which you reported. The problem is only some technical problems on GitHub: the latest commits will be not displayed. You can get the files from [jquery.jqgrid.src.js](http://www.ok-soft-gmbh.com/jqGrid/OK/jquery.jqgrid.src.js), [jquery.jqgrid.min.js](http://www.ok-soft-gmbh.com/jqGrid/OK/jquery.jqgrid.min.js) and [jquery.jqgrid.min.map](http://www.ok-soft-gmbh.com/jqGrid/OK/jquery.jqgrid.min.map). – Oleg Apr 05 '16 at 21:44
  • I tried this and latest github jquery.jqgrid.min.js but enter still does not invoke advanced search. It looks like this comment does not belong to this answer. – Andrus Apr 06 '16 at 16:41