How to achieve this structure for an autocomplete feature?

Here is, more or less, the general workflow:

1. The user types something on a input element;
2. Onkeyup, it will grab values from our backend script, and choose one.
3. After choosing, onblur, we will grab that value and use it to query the database for some data,
4. With the data returned from the DB he will execute other commands on an external server.
5. Then it will grab that values and use them to fill some input elements that are there waiting to be filled in, once the user chooses is option from the autocomplete element.
6. With that data in place, the user can then change the values, and hit save for yet another "ajax adventure..."

So, here, we are on steps 1 and 2 only (so I believe):

This is what I have been able to accomplish with the help of this article. That I'm trying to understand and adapt.

//1) WHEN WILL verificaInput BE CALLED?


$(document).ready(function verificaInput(inputString) {
    if (inputString.length == 0) {
        $('#sugestoes').hide();
    } else {

        $.post('modelAutocompleteTeste.php',
   开发者_如何学运维               {nomeDominio: $('#nome-dominio').val()},

            function(dadosResposta){

                if(inputString.length > 3) {
                    $('#sugestoes').show();

                     //2) WHAT SHOULD I PUT HERE?
                }
            },
       "json"
        );
    }
}

About 1: We must NOT use inline js calls. Where should we call/use the events like onkeyup and onblur etc?

About 2: view source print?

function(dadosResposta){

This will contain the response from our server side script, if the input string is greater then 3, it will show our suggestions. Now, inside this suggestion I will need to populate some elements (<li>) containing ALL the data returned in json format from our server side script (it's PHP - using json_encode())?

If so, is this the proper place to loop over and create the li elements?

More then answers, I would like to ask for some advice; I'm lost and stuck.

To get you started...

$(document).ready(function() {
    $('#your_input_field').bind('keyup', function() {
        var theVal = $(this).val();
        if (theVal.length > 3) {
            verificaInput(theVal);
        } else {
            $('#sugestoes').hide();
        }
    });
});

function verificaInput(inputString) {
    if (inputString.length == 0) {// this will never be true
        $('#sugestoes').hide();// so this will never be necessary
    } else {
        $.post('modelAutocompleteTeste.php',
            {nomeDominio: $('#nome-dominio').val()},
            function(dadosResposta){
                if(inputString.length > 3) {
                    $('#sugestoes').show();
                    //2 here you should include a function name that will allow interaction with the provided list
                }
            },
            "json"
        );
    }
}