How to create Autocomplete textbox from database results in a html page using java servlet, jquery, json object by making an ajax call

Question

I have tried different things but i am not able to do this. I am very new to jquery json and ajax. I wrote a servlet which connects to my databse and retrive user ids from the table. I wrote a jsp and which has a text box that takes input text and refines the results on each key press I want to do it in a html page using jquery ajax by sending json object from my servlet. can someone give me an example for this scenario.

Thanks in advance.

Answer 1

http://jsfiddle.net/tAjNz/

<input type="text" />
<select id="autoPop" multiselect="true"></select>
<script>
// define a data source (ajax or on page load);
myJson = [{value:1,text:'Item One'},{value:1,text:'Item Two'},{value:1,text:'Item Three'},{value:1,text:'Item Four'}];



$('input[type="text"]').keyup(function(){
    //Optionally update the data source when a user starts typing or use the predefined source.
    //Populate the select list
    $sel = $('select');
    $sel.html('');
    var $this = $(this);
    $.each(myJson,function(k,v){
        if(v.text.toLowerCase().indexOf($this.val().toLowerCase()) > -1) {                    
            $sel.append('<option value="' + v.value+ '">'+ v.text+'</option>');           
                }
    });
});
</script>