Question

我有一个jQuery自动完成输入。自动填充的可用标签是城市或国家/地区。

如果没有结果，我想在谷歌地图自动填充字段中附加HTML作为结果。

我几乎没有成功，但当我选择（通过点击）谷歌地图建议的城市时，jQuery自动完成关闭......

输入'x'
右键点击“位置”（有一个错误，左键点击“位置”字段时没有任何反应......）然后输入一个位置'即纽约'）
左键单击“纽约”建议并自动完成关闭！

$( "#addresspicker" ).autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term);
        if (!results.length) {
            results = [EmptyResult];
        }
        response(results);
    },
    open: function(event, ui) {
        if ($('.ui-autocomplete').last().children().text() == EmptyResult) {
            $('.ui-autocomplete').append("<li><b>Please, enter a location:</b>" +
                            "<form action='/asking_user_locations' method='post' accept-charset='UTF-8'>" +
                            "<input name='info[where]' id='address_picker_place' maxlength='255' type='text' placeholder='Location' required>" +
                            "<input name='info[email]' id='address_picker_email' maxlength='255' type='email' placeholder='email' required>" +
                            "<input name='commit' type='submit' value='submit'></form></li>");

                            new google.maps.places.Autocomplete(document.getElementById('address_picker_place'), { types: ['(cities)'] })

        }
    }
});

我不希望自动填充表格关闭，你能帮助我吗？

Answer 1

我不确定您是否通过将地图表单直接附加到结果中来使用正确的方法。我认为您应该将表单放在一个单独的div中，并在必要时显示/隐藏它。

类似的东西：

<input id="addresspicker" style="width: 200px; position: relative;">
<div id='maps-autocomplete' style="position: absolute; border: 1px solid #b1b1b1; top: 28px; width: 204px;display:none;">
  <b>Please, enter a location:</b>
  <form action='/asking_user_locations' method='post' accept-charset='UTF-8'>                     
    <input name='info[where]' id='address_picker_place' maxlength='255' type='text' placeholder='Location' required="true" /><br/>
    <input name='info[email]' id='address_picker_email' maxlength='255' type='email' placeholder='email' required="true"/><br/>
    <input id="maps-commit" name='commit' type='submit' value='submit'/></form>
</div>

JS将是：

$(function() {
    var EmptyResult = "";
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    new google.maps.places.Autocomplete(document.getElementById('address_picker_place'), { types: ['(cities)'] })
    $( "#addresspicker" ).autocomplete({
        source: function(request, response) {
            var results = $.ui.autocomplete.filter(availableTags, request.term);
            if(!results.length) { $("#maps-autocomplete").show();}

            response(results);
        },
  });
});

当然，在此之后，如果在原始输入中输入了某些内容，您应该确保隐藏并清除表单。

检查这个小提琴：http://jsfiddle.net/Nq3Nj/

当没有导致jquery自动完成时插入谷歌地图自动完成输入

1 个答案: