用户界面-发送元素's id作为jQuery自动完成源的url参数

Question

我正在尝试这样做:

$("[type=text]").autocomplete({
    source: "./json.php?id="+$(this).attr("id"),
    minLength: 2
}).addClass("ui-widget ui-widget-content ui-corner-left");

显然source: "./json.php?id="+$(this).attr("id")不起作用。有人知道我该怎么做吗?会有很多自动完成字段，所以我不能使用像$('#ID')这样的选择器。

Answer 1

如果您需要同时为多个元素设置此设置，请使用each()循环:

$("[type=text]").each(function() {
    var thisEl = $(this);
    thisEl.autocomplete({
        source: "./json.php?id=" + thisEl.attr("id"),
        minLength: 2
    });
    // whatever else you want to do with the element
});

Answer 2

您必须在适当的范围内使用.each()迭代它们以执行.attr():

$("input[type=text]").each(function(){
    $(this).autocomplete({
        source: "./json.php?id="+$(this).attr("id"),
        minLength: 2
    }).addClass("ui-widget ui-widget-content ui-corner-left");
}

Edit:正如评论中提到的，你有一个LOT字段，比如1500+。您可以尝试通过向每个字段添加一个类来提高性能，并使用.classname选择器，或者至少将初始搜索范围缩小到input[type="text"]，尽管jQuery可能已经为了优化而这样做了。

您也可以尝试在自动完成的create或search事件中设置source选项，尽管后者可能不起作用。看看它的执行情况也无妨:

$("input[type=text]").autocomplete({
    search: function(){
        $(this).autocomplete("option", "source", "./json.php?id="+$(this).attr("id"));
    },
    minLength: 2
}).addClass("ui-widget ui-widget-content ui-corner-left");

或者你甚至可以绑定到输入字段本身的焦点事件来设置源:

$("input[type=text]").autocomplete({
    minLength: 2
}).focus(function(){
    $(this).autocomplete("option", "source", "./json.php?id="+$(this).attr("id"));
}).addClass("ui-widget ui-widget-content ui-corner-left");

看看这些是否能提高性能，这是一个有趣的测试用例。