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

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

用户在输入元素上键入内容

Onkeyup，它将从我们的后端脚本中获取值，并选择一个

选择onblur后，我们将获取该值并使用它查询数据库中的一些数据

使用数据库返回的数据，他将在外部服务器上执行其他命令

然后，一旦用户从autocomplete元素中选择is选项，它将获取这些值并使用它们填充等待填充的一些输入元素

有了这些数据，用户就可以更改这些值，然后点击save进行另一次“ajax冒险…”

因此，在这里，我们只讨论了步骤1和步骤2（因此我相信）：

这就是我在他的帮助下所能完成的。我正在努力理解和适应

//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: 视图源 印刷品

这将包含来自服务器端脚本的响应，如果输入字符串大于3，它将显示我们的建议。现在，在这个建议中，我需要填充一些元素（

）

，其中包含从服务器端脚本以json格式返回的所有数据（它是PHP-使用

json\u encode（）

）

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

除了答案，我想请教一些建议；我迷路了，被卡住了。

为了让你开始

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

---

我不知道你是否看过它，但你可能想考虑jQuery UI自动完成插件。它支持所有这些，并且有很好的文档记录。

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