How to make the searchbar search on keyboard enter button

Posted by riche on 02-Mar-2015 08:52

I have a searchbar that I am using to perform a key word search in a database table. It works fine if you click on the search button.

If I deploy to an android device, how do I get it to do the search when they click on the enter key in keyboard? Or how do I have the input keyboard that comes up have the search button?

I tried using the page Searchbutton event, but this is not the same key because it never fires that event (I also handled the Backbutton and I did get to this event on the device).

This didn't work, so I was going to handle the searchbar Keypress event, but it doesn't send the event to the function, so I can't figure out how to determine which key was pressed.

I will be testing with IOS as well.

Is there a way to do it that will work for browser, and all of them or do I need to handle it differently for each?

Posted by egarcia on 03-Mar-2015 07:19

Hello,

I received feedback from a developer in the Mobile App Builder team.

The generated code actually generates type="search" for a searchbar, however, JQuery Mobile changes the type to "text" and adds data-type="search".

He also shared the following code snippet:

if(arguments[0]["keyCode"] == 13) {

  var searchValue = Progress("search_input").val();

   startSearch(searchValue);

   ...

}

I hope this helps.

All Replies

Posted by egarcia on 03-Mar-2015 06:06

Hello,

The search component is based on jQuery. I noticed that the generated code uses type="text" which means that the mobile OS would use a regular keyboard for input. (If type was "search" then the mobile OS would have a hint to use a keyboard with the Search button.)

The approach that you are using with keypress seems to be the right approach. It should work with your web browsers and mobile devices.

To figure out which key was pressed, use the arguments reference.

Example:

   alert("DEBUG: Keypress: " + arguments[0]["keyCode"]);

Best regards.

Posted by egarcia on 03-Mar-2015 07:19

Hello,

I received feedback from a developer in the Mobile App Builder team.

The generated code actually generates type="search" for a searchbar, however, JQuery Mobile changes the type to "text" and adds data-type="search".

He also shared the following code snippet:

if(arguments[0]["keyCode"] == 13) {

  var searchValue = Progress("search_input").val();

   startSearch(searchValue);

   ...

}

I hope this helps.

Posted by riche on 03-Mar-2015 08:35

That worked precisely as expected. Thank you.

The app designer wants me to use arguments[0].keyCode instead, which works.

I really had trouble finding any examples of using the key events. Am I missing some useful documentation somewhere so that I can stop using up all of egarcia's time?

Posted by egarcia on 03-Mar-2015 09:13

Hello,

I do not think that you missed any particular item in the documentation (help/doc for Mobile App Builder).

The key thing seems to be that the event is not available as a parameter and the documentation does not suggest to use arguments as a way to get to it.

Notice that arguments[0] in this context would actual be the event parameter if you were to bind the handler (with e as a parameter) directly using jQuery.

The warning that you got is from the lint tool that suggests to use dot notation instead of brackets.

Thanks.

This thread is closed