javascript - JQuery 自动完成(城市/州) - 需要帮助使脚本更加健壮

Question

以下代码对城市执行自动完成操作，然后选择关联的州。如果我遵循 Id:城市和州的约定，效果会很好。我遇到了这样的情况:一个页面上有多个具有不同 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 应该是唯一的。

所以我推荐以下内容:

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

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

3. 考虑将状态输入设置为只读(如果尚未设置)。这让用户知道他们不应该在那里打字，并阻止 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 和爆炸事件处理程序。

您也可以使用 jQuery data 来实现此目的，如果您不喜欢用非标准属性(我指的是 html 部分中的 stateid="homestate")污染您的标记。

编辑:下一段解释错误。

According to the docs ，在 select 函数中，ui.item 是已自动完成的输入的 jQuery 元素，因此它应该是正确的 #homecity 并且 attr 调用应该返回 #homestate 的正确值(与示例保持一致)。但我还没有尝试过，所以您可能想在其中添加一些 null 和/或未定义的检查。

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

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

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

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