Question

我想在网站上添加一个自动完成功能，并发现本指南使用了一些js代码，这对于一个文本框非常有用：http://www.sks.com.np/article/9/ajax-autocomplete-using-php-mysql.html

但是，当尝试添加多个自动填充时，只有最后一个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);
});
}

对于一个文本框，我可以像这样调用函数

$(function(){      
setAutoComplete("field", "fieldSuggest", "/functions/autocomplete.php?part=");
});

然而，当使用多个文本框时，我不确定我应该怎样做，这是我尝试过的但是没有用的

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

感谢您的帮助。

Answer 1

您应该使用类来使您的函数在同一页面上的多个元素中工作。只需删除固定ID并执行forEach即可定位该类的每个元素。

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

1 个答案: