CODEWITHSUNDEEP
ajaxjsf-2
Steve Atkinson
Steve Atkinson

Reputation: 1239

JSF Ajax - trigger on partially completed field

I want to implement a "typeahead" type of functionality but for effiency reasons to avoid return a list of possibly thousands of entries, I only want to fire the request to the server when the user has entered at least three characters. I.E. on the 3rd keypress, I want to call my server side search via ajax.

I'm not looking for a full runnable example, just a sketch of how this might be possible, as I'm a bit stumped by it.

I do have a generic ajax handler js file in my app to render the ajax "spinner" so I thought I might be able to hook into event method for status="begin" and somehow abort the request if the input field has less than 3 characters but I don't see how that's possible.

I'm hoping a certain JSF guru might be able to point me in the right direction :)

I'm using standard reference JSF2, no 3rd party libraries...

Upvotes: 0

Views: 243

Answers (1)

Daniel
Daniel

Reputation: 37061

How about adding a onkeyup="myFunction(event)" to your input

<input type="text" onkeyup="myFunction(event)">

and in js add the following

function myFunction(e){
  if (e.target.value && e.target.value.length > 2) {
    alert('do some ajax with the value: ' + e.target.value);
  }
}

In jsf you can add some hidden input with f:ajax and trigger it from js with somethign like this document.getElementById("myButtonId").click(); Online example

Upvotes: 1

Related Questions