javascript - 如何实现自动完成功能的这种结构？

Question

以下是大致的一般工作流程:

1. 用户在输入元素上键入内容；
2. Onkeyup，它将从我们的后端脚本中获取值，并选择一个。
3. 选择 onblur 后，我们将获取该值并使用它来查询数据库中的某些数据，
4. 利用从数据库返回的数据，他将在外部服务器上执行其他命令。
5. 然后，一旦用户从自动完成元素中选择了选项，它就会获取这些值并使用它们来填充一些等待填充的输入元素。
6. 有了这些数据，用户就可以更改值，然后单击保存以进行另一次“ajax 冒险...”

所以，在这里，我们只进行第 1 步和第 2 步(我相信):

这是我在 this article 的帮助下完成的任务。 。我正在努力理解和适应。

//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"
        );
    }
}

关于1:我们不能使用内联js调用。我们应该在哪里调用/使用 onkeyup 和 onblur 等事件？

关于2:查看源代码打印？

function(dadosResposta){

这将包含我们服务器端脚本的响应，如果输入字符串大于 3，它将显示我们的建议。现在，在这个建议中，我需要填充一些元素( <li>) 包含从我们的服务器端脚本以 json 格式返回的所有数据(它是 PHP - 使用 json_encode() )？

如果是这样，这是循环并创建 li 元素的正确位置吗？

除了答案之外，我还想请教一些建议；我迷失了方向，陷入了困境。

Answer 1

让您开始...

$(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"
        );
    }
}