Ajax список доступных пользователей небольшая ошибка в JavaScript

Question

У меня есть этот javascript / jquery для отображения списка доступных пользователей.

HTML:

<input name="username" type="text" size="16" onkeyup="lookup(this.value);" onblur="fill();"/>                                   
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
&nbsp;
</div>
</div>

jquery:

<script type="text/javascript">
function lookup(username) {
    if(username.length == 0) {
    // Hide the suggestion box.
        $('#suggestions').hide();
    } else {
        $.post("php/rpc.php", {queryString: ""+username+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup

function fill(thisValue) {
    $('#username').val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
}
</script>

Это список доступных имен пользователей, которые вы можете ввести.

пример HTML:

<li onclick="fill('user1');">user1</li>
<li onclick="fill('user1');">user1</li>

Но функция заполнения не работает.Если я добавлю alert('test'), появится всплывающее окно, так что оно работает, но не заполняет поле ввода username

Answer 1

Основная ошибка здесь заключается в том, что атрибут name элемента input отличается от атрибута id.Либо

<input name="username" type="text" size="16" onkeyup="lookup(this.value);" onblur="fill();"/>

должно быть

<input id="username" name="username" type="text" size="16" onkeyup="lookup(this.value);" onblur="fill();"/>

, либо селектор jQuery, ссылающийся на него, должен быть $("input[name='username']").

Другая возможная ошибка - и это действительно зависит от того, каквы объявляете javascript - может ли загруженный AJAX HTML-код получить доступ к функции fill.Один из простых способов исправить это, хотя вы можете несколько потерять в производительности, если загружаете большое количество элементов списка, - это назначить обработчик событий в функции обратного вызова:

     $.post("php/rpc.php", {queryString: username}, function(data){
        if(data.length >0) {
            $('#suggestions').show();
            $('#autoSuggestionsList').html(data)
                // find list elements and attach the event handler
                .find('li').click(function() {
                    // this removes the need to pass in any arguments:
                    // just use the text of the list element
                    var val = $(this).text();
                    $('#username').val(val);
                    // as @SLaks notes, better a function than a string here
                    setTimeout(function() {
                        $('#suggestions').hide();
                    }, 200);
                });
        }
    });

Это удаляеттребуется две функции и упрощает загрузку HTML с помощью AJAX, поскольку вы можете просто загрузить

<li>user1</li>
<li>user2</li>

См. http://jsfiddle.net/nrabinowitz/WNJnc/3/ для полного рабочего примера этого кода.