Question

我正在尝试使用ajax进行远程autosuggest，并且在使用onclick函数制作ul时遇到问题。我收到的ajax响应就像是

One Name
Another Name

以\ n

分隔

以下是我到目前为止的情况。它有的问题：它是非常难看的代码，而///////////////之间的界限不起作用。显然它保存了对变量的引用，并且所有元素都使用最后一个元素的值填充文本输入。

任何人都可以帮我解决这个问题吗？无论是将字符串副本传递给该函数定义的方法，还是以正确方式执行此操作的提示，链接或其他任何方式都将受到高度赞赏。

由于

<script type="text/javascript">
    $('.suggestable').live('keyup', ( function() { suggest(this); } ));

    function suggest(inputTextField)
    {
        var inputString = inputTextField.value;
        var lookFor = $(inputTextField).attr('data-lookfor');

        if(inputString.length == 0) {
//            $('#suggestions').fadeOut();
        } else {
            $.post(AjaxVars.url,
                {
                    action: 'suggest-submit',
                    queryString: ""+inputString+"",
                    lookFor: ""+lookFor+""
                },
                function(data)
                {
                    // Clear the target div in a very very ugly way
                    document.getElementById('suggestionsList').innerHTML = "";
                    var myul = document.createElement('ul');
                    data = data.split("\n");
                    for(var index in data)
                    {
                        elem = data[index];
                        if(elem.length > 0)
                        {
                            var myli = document.createElement('li');
                            myli.innerHTML = elem;
//////////////////////////////////////
                            myli.onclick=(function() { fill(inputTextField, elem); });
//////////////////////////////////////
                            myul.appendChild(myli);
                        }
                    }

                    document.getElementById('suggestionsList').appendChild(myul);
                });
            }
    }

    function fill(object, thisValue) {
        object.value = thisValue;
//        setTimeout("$('#suggestions').fadeOut();", 600);
    }
</script>

Answer 1

仅限您的回复功能：

function(data){
    $('#suggestionList').innerHTML = '<ul><li>' + data.split('\n').join('</li><li>') + '</li></ul>';
}

以及所有内容之外的某个地方function suggest(){：

$('#suggestionList').delegate('li', 'click', function(){
    fill(inputTextField, $(this).val());
});

仅供参考，行不起作用的原因是elem的值发生了变化...以显示我的意思，请看以下示例：

for(var i=0; i<10; i++){
   $('#someDiv').bind('click', function(){ alert(i); });
}

无论你点击什么div都显示'10'，因为i变量保持递增到10并且所有函数都引用一个变量。要完成这项工作，您需要某种闭包：

for(var i=0; i<10; i++){
   $('#someDiv').bind('click', (function(x){ return function(){ alert(x); } })(i));
}

现在i被传入内部函数并被引用为x。

Answer 2

这是我试图清理它，未经测试的

<script type="text/javascript">
    $('.suggestable').live('keyup', ( function() { suggest(this); } ));

    function suggest(inputTextField)
    {
        var inputString = inputTextField.value;
        var lookFor = $(inputTextField).attr('data-lookfor');

        if(inputString.length == 0) {
//            $('#suggestions').fadeOut();
        } else {
            $.post(AjaxVars.url,
                {
                    action: 'suggest-submit',
                    queryString: inputString,
                    lookFor: lookFor
                },
                function(data)
                {
                    $('#suggestionsList').html('');
                    var myul = document.createElement('ul');
                    $.each(data.split('\n'), function(k, v) {
                        if(v.length < 0)
                            return true;
                        (function(elem){
                            var myli = document.createElement('li');
                            myli.innerHTML = elem;
                            myli.onclick = function() { fill(inputTextField, elem); };
                            myul.appendChild(myli);
                        })(v);
                    });
                    $('#suggestionsList').appendChild(myul);
                });
            }
    }

    function fill(object, thisValue) {
        object.value = thisValue;
//        setTimeout("$('#suggestions').fadeOut();", 600);
    }
</script>

从ajax响应创建一些对象

2 个答案: