一页有两个自动填充

Question

我正在使用jquery自动完成功能。它确实有效，但是当我试图在同一个网站上放下另一个时，它会显示空格而不是结果。我已经尝试复制脚本，但更改其名称等，但它仍然无法正常工作。我发现只有第一个自动完成表单才有效。我正在研究这个问题，就像2个星期一样，检查了所有主题并且无法弄明白。有什么帮助吗？

<div class="searchbar">
    <input type="text" name="searchFriends" class="searchFriends" placeholder="search friends">
</div>

<style>
    .ui-menu .ui-menu-item {
        font-size: 10px;
    }
</style>

<script>
    try {
        $(".searchFriends").autocomplete({
            source:    "/searchFriends",
            minLength: 3,
            select:    function(event, ui) { 
                    if(ui.item.type=="group")
                        window.location.href = "/group/" + ui.item.id;
                    else
                        window.location.href = "/u/" + ui.item.login;
                }
        }).autocomplete("instance")._renderItem = function(ul, item) {
            return $(
                    "<li style='clear:both;'><img src='" + item.avatar + "' style='margin-right:2px;float:left;max-height:30px;max-width:30px;'/>"
                ).append("<a>" + item.login + "<br>" + item.first_name + " " + item.last_name + "</a>"
                ).appendTo(ul);
        };
    } catch(exc) {
        console.log(exc);
    }
</script>