Javascript 在文本框焦点上使用函数？

我想在一个网站上添加一个自动完成功能，并找到了这本指南，它使用了一些js代码，对于一个文本框来说效果非常好：

但是，当尝试添加多个自动完成时，只有最后一个tetbox可以工作，因为它是最后一组

下面是为js脚本设置变量的函数

function setAutoComplete(field_id, results_id, get_url)
{

// initialize vars
acSearchId  = "#" + field_id;
acResultsId = "#" + results_id;
acURL       = get_url;

// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');

// register mostly used vars
acSearchField   = $(acSearchId);
acResultsDiv    = $(acResultsId);

// reposition div
repositionResultsDiv();

// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });

// on key up listener
acSearchField.keyup(function (e) {

    // get keyCode (window.event is for IE)
    var keyCode = e.keyCode || window.event.keyCode;
    var lastVal = acSearchField.val();

    // check an treat up and down arrows
    if(updownArrow(keyCode)){
        return;
    }

    // check for an ENTER or ESC
    if(keyCode == 13 || keyCode == 27){
        clearAutoComplete();
        return;
    }

    // if is text, call with delay
    setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}

然而，当我使用多个文本框时，我不确定我应该怎么做，这里有一些我尝试过的东西，但它不起作用

$('#f1').focus(function (e) {   
    setAutoComplete("f1", "fSuggest1", "/functions/autocomplete.php?q1=");
}
$('#f2').focus(function (e) {   
    setAutoComplete("f2", "fSuggest2", "/functions/autocomplete.php?q2=");
}

---

感谢您的帮助。

您应该使用类使函数在同一页面上的多个元素中工作。只需删除固定ID，然后进行forEach以该类的每个元素为目标。

为什么每次元素获得焦点时都要添加侦听器？您应该使用函数初始化每个元素clearAutoComplete做什么？它是否清除了附加到#auto的div？具有相同id的多个字段可能会导致问题，但您应该首先更改它Bouillou的建议，其次您认为它不起作用是什么意思。JS控制台上有错误吗？如果存在具有相同id的重复元素，并且您检查了这些元素，您是否看到结果进入其中一个元素，但尝试显示另一个元素。e、 g.

• res1

$('#f1').focus(function (e) {   
    setAutoComplete("f1", "fSuggest1", "/functions/autocomplete.php?q1=");
}
$('#f2').focus(function (e) {   
    setAutoComplete("f2", "fSuggest2", "/functions/autocomplete.php?q2=");
}