Question

这里或多或少是一般工作流程：

用户在输入元素上键入内容;
Onkeyup，它将从我们的后端脚本中获取值，然后选择一个。
选择onblur之后，我们将获取该值并使用它来查询数据库中的某些数据，
使用从DB返回的数据，他将在外部服务器上执行其他命令。
然后它将获取这些值并使用它们来填充一些等待填写的输入元素，一旦用户选择了自动完成元素中的选项。
有了这些数据，用户就可以更改这些值，然后点击另一个“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>)，其中包含从我们的服务器端脚本（它的PHP - 使用json_encode()）以json格式返回的所有数据？

如果是这样，这是循环并创建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"
        );
    }
}

如何为自动完成功能实现此结构？

1 个答案: