1

以下代码对城市执行自动完成，然后选择关联的状态。如果我遵循 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);
    }
});
4

1 回答 1

1

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

所以我会推荐以下内容：

  1. 使您的 ID 独一无二，最好以与其用途相匹配的方式命名（例如id="homecity"，id="vacationcity"等）

  2. 向您绑定的城市和州输入添加一个类。

  3. readonly如果还没有，请考虑进行状态输入。这让用户知道他们不应该在那里打字并阻止 UI 事件和交互。希望它不会破坏自动完成插件。

  4. 向城市的标记添加一个属性，以指示他们将修改哪个州输入。

将它们捆绑在一起，因为我显然不能将代码示例放在列表的中间......

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 部分中）污染您的标记，您也可以使用jQuery data来实现这一点。stateid="homestate"

编辑：下一段解释错误。

根据文档，在select函数中，ui.item是已自动完成的输入的 jQuery 元素，因此它应该是正确#homecity的，并且attr调用应该返回正确的值#homestate（与示例保持一致）。但我还没有尝试过，所以你可能想在那里进行一些 null 和/或未定义的检查。

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

Object {item: Object}
  item: Object
    code: "AK"
    label: "Jeuno, Alaska"
    value: "Jeuno"

获取要更新的状态的 attr 的正确方法是在 fromthis中，在函数的闭包中select作为输入的 DOM 元素捕获。因此，在其上运行 jQuery 函数$(this)可以获得 jQuery 对象，您可以从中获取attr()或data().

JSFiddle 在此处具有多个自动完成功能：http: //jsfiddle.net/KBVxK/1/

于 2012-12-06T04:02:32.680 回答