Создание некоторых объектов из ответа ajax

Question

Я пытаюсь сделать автозаполнение с помощью ajax, и у меня возникают проблемы при создании ul с функцией onclick.То, что я получаю как ответ 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); });
}

, который будет показывать '10' независимо от того, на какой div вы нажимаете, потому что переменная 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>