Search on keyup vs submit

Search on keyup vs submit
0

#1

I’m trying to decide which I like better:

Search on keyup:
Project Link - http://codepen.io/lacyjpr/pen/pEaQEE

or Search on submit:
Project Link - http://codepen.io/lacyjpr/pen/ozGJVp

Search on keyup is lively and gives the user some feedback that the site is working. It also lets the user know they can stop adding search terms if they find what they’re looking for.

It also pauses when the internet lags and causes an error when you delete a search because the api doesn’t like the backspace key.

What do you think?


#2

I like the keyup version much better, though I suggest a couple of changes. First, keep the AJAX call from firing if the search term is empty - this is what’s causing your error. Second, Wikipedia might appreciate it if you were to “debounce” the input, meaning you only sent an AJAX call once every 500ms even if keyup events are coming in much faster. Great job on both, though!


#3

Thanks for the suggestions PortableStick, I really appreciate it!

I managed to get rid of the backspace, delete and down-arrow errors this way:

if (event.which === 8 || event.which === 46 || event.which === 40){
return false;
}


#4

So, I mucked both approaches in favor of autocomplete:
Project link - http://codepen.io/lacyjpr/full/pEaQEE/