Question

因此，制作一个包含多个地址搜索框的表单。使用jquery谷歌自动完成地址搜索。使用这个jquery插件：的 ubilabs.github.io/geocomplete

尝试将详细信息数据传递到不同的输入框，如下所示：的 ubilabs.github.io/geocomplete/examples/form.html

$(".addressinputclass").geocomplete({
  details: ".thisisparentclass",
  detailsAttribute: "data-geo"
});

这是html：

            <div class="thisisparentclass">
                <input type="text" name="address1" class="addressinputclass" />
                <input type="text" name="writepostcodehere" placeholder="Post code" data-geo="postal_code" />
                <input type="text" name="writecountryhere" placeholder="Country Name" data-geo="country" />
            </div>

但现在问题是，当它是多个地址输入框时，其他信息框获取最后的地址信息。你可以在这里查看例子： http://jsfiddle.net/kosmspLm/

那里有什么帮助吗？

更新：感谢Lesha Ogonkov和他们的帮助。 Tushar Gupta。我得到了解决问题的方法。：）

Answer 1

Fiddle Demo

<强>解决方案

$this.closest(".thisisparentclass");

查找地址输入的类thisisparentclass的当前父级，以便仅为当前选择填充detailsAttribute。

$(function () {
    $(".addressinputclass").each(function () {//run each loop
        var $this = $(this); //cache your selector, this refers to the current element
        $this.geocomplete({ //attach auto-complete to the current element 
            details: $this.closest(".thisisparentclass"), //get the closest elements with class thisisparentclass
            detailsAttribute: "data-geo" //attach data attribute
        });
    });
});

<强>问题

您要附加到具有类thisisparentclass的所有元素，因此当您选择该地址时，它会填充所有框并更改之前的选择。

$(".addressinputclass").geocomplete({
  details: ".thisisparentclass", //you are attaching to all the elements having this class
  detailsAttribute: "data-geo"
});

Answer 2

您可以将选择器传递给插件

http://jsfiddle.net/kosmspLm/2/

$(function(){
  $('.addressinputclass[name="address1"]').geocomplete({
    details: $($(".thisisparentclass").get(0)),
    detailsAttribute: "data-geo"
  });
});

如果你需要很少的字段来工作，我认为你需要循环容器，如下所示：

$(function(){
  $(".thisisparentclass").each(function() {
      var suggest, details;

      details = $(this);
      suggest = details.find('.addressinputclass');

      suggest.geocomplete({
        details: details,
        detailsAttribute: "data-geo"
      });
  });
});

http://jsfiddle.net/kosmspLm/3/

jquery帮助需要 - 只将数据放在同一个div下

2 个答案: