Question

以下代码为city执行自动完成，然后选择关联状态。如果我遵循Id：City and State的惯例，它的效果很好。我遇到了在具有不同ID的页面上有多个城市/州控制的情况。

有人可以帮我修改一下这个代码更通用吗？

由于

    $("#City").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON?country=US",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function (data) {
                response($.map(data.geonames, function (item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : ""),
                        value: item.name,
                        code: item.adminCode1
                    }
                }));
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        $("#State").val(ui.item.code);
    }
});

Answer 1

看起来你的问题是当一个#City自动完成时，所有#States都会更新到那个选项，是吗？这部分是因为您违反了html规则。 ID应该是唯一的。

所以我建议如下：

使您的ID唯一，最好以与其相符的方式命名（例如id="homecity"，id="vacationcity"等。）
向您的城市添加课程并说明您要绑定的输入。
如果尚未输入状态输入readonly，请考虑进行输入。这让用户知道他们不应该在那里输入并阻止UI事件和交互。希望它不会破坏自动完成插件。
为城市的标记添加一个属性，以指示他们将要修改的状态输入。

将所有内容捆绑在一起，因为我无法将代码示例显示在列表中间...

HTML：

<input id="homecity" class="autocomplete-city" stateid="homestate"></input>
<input id="homestate" class="autocomplete-state" readonly="readonly"></input>

使用Javascript：

    $(".autocomplete-city").autocomplete({
    source: function (request, response) {
        $.ajax({
            // your normal ajax stuff
        });
    },
    minLength: 2,
    select: function (event, ui) {
        // Updated. 'this' is captured in the closure for the function here
        // and it is set to the dom element for the input. So $() turns it
        // into a jQuery object from which we can get the stateid attr
        $("#"+$(this).attr('stateid')).val(ui.item.code);
    }
});

中提琴！每个输入通常与他们将控制的状态相关联。没有更多冲突的ID，也没有更多爆炸性的事件处理程序。

如果您不喜欢使用非标准属性（我指的是html部分中的stateid="homestate"）来标记您的标记，您也可以使用jQuery data将其关闭。

编辑：下一段解释错误。

According to the docs，在select函数中，ui.item是已自动填充的输入的jQuery元素，因此它应该是正确的#homecity和{ {1}}调用应返回attr的正确值（与示例一致）。但是我没有尝试过，所以你可能想在那里抛出一些null和/或未定义的检查。

编辑：传递给#homestate函数的ui.item参数是从菜单中选择的项目，而不是输入元素的jQuery对象。 select具有以下结构：

ui

获取状态更新的attr的正确方法是从Object {item: Object} item: Object code: "AK" label: "Jeuno, Alaska" value: "Jeuno"开始，在this函数的闭包中捕获，作为输入的DOM元素。因此，在select上运行jQuery函数可以获取jQuery对象，从中可以获取$(this)或attr()。

JSFiddle在这里有多个自动填充：http://jsfiddle.net/KBVxK/1/

JQuery自动完成（城市/州） - 需要帮助使脚本更健壮

1 个答案: