Automatically Resetting Search Input

Automatically Resetting Search Input



My webb app has a search input box, as well as the search and reset buttons. I'm using an infrared scanner that works well with the input box and automatically searches the barcodes that I'm scanning. 

I would like for the input box to automatically clear itself while I'm scanning a new barcode (instead of having to hit the reset button every time). Can someone help me with this?


Why not just run that Reset implementation prior to running the new search logic, refreshing/cleaning the UI before showing new search results, so the user has the feel of what's being done? Or simply replace the search input with the new scanned value without Reset?

How are you obtaining the scanner data?


How could I replace the search input with the new scanned value without reset in a manner that won't take too much time for the user? I'm trying to make scanning a quick process because this is for a web app that will be used in a warehouse's shipping department. 

I'm not exactly sure what you mean by your last question, but I'm using an infrared scanning gun that has a USB attachment to my computer. The data that corresponds to the scanner is being pulled in from MySQL.


With my question, I actually meant to know how does the web app become aware of a new scanned code?

  1. is being pushed automatically to the web app (and how? a notification subscription?) or...
  2. is just the Reset button action that cleans existing value and at the same time pulls the latest captured with scanner from DB?

Ok I understand now. It is for now just the following steps:

1) Reset button action clears the existing value

2) I use the scanner to scan the barcode (from a piece of paper) and it inputs the order number and automatically searches:

I would like to make this entire process happen simultaneously where I scan the next barcode and it automatically erases the existing value and replaces it with the new one. 

Clear the search value and refresh the input after showing the result.

@Tiago, a scanner is a serial interface works like a keyboard.



You can do it like Stanley says, if you have that Search action as ajax submit, clearing the search variable and using the ajax refresh on the input widget, placing them just before the End node.

You could also use the Highlight animation effect on the table records when you refresh it, to give a visual hint to the user every time a search is performed.