passing input text's value to server side on click of a button in JSF

I have a text box which takes a search value, and i want to send this string to the server side on click of a button. Not by a form submit, by an ajax call.

I had added an actionListener to the input tag itself, which is called on blur. But what i really want is for the user to click the button to trigger the search function.

I got an idea from this question, and implemented it this way:

<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:jsFunction name="setParameterAndRerender" actionListener="{bean.searchMaterials}" reRender="searchResult">
    <a4j:actionparam name="param1" assignTo="#{createBookingForm.searchText}"/> 
</a4j:jsFunction> 
<h:commandButton value="Search" onclick="setParameterAndRerender('mySearchText');return false;"></h:commandButton>

The value received at server side is of course, "mySearchText". How do i pass what the user enters? Or how do i bind #{createBookingForm.searchText} before the button's action listener is called?

Im open to any other approach to. I have limitations though : Im working on enhancing a legacy application, built using JSF 1.1. I cant upgrade, not without a fight at least!

Edit : I tried doing it this way, but i get "undefined" on the server side.

Solution

Why not use a4j:commandButton instead of h:commandButton? It will execute ajax request and render what you want. No form submit will happen. Loks like what you need.