当jQuery自动完成没有结果时插入谷歌地图自动完成输入答案

【问题标题】：Insert google maps autocomplete input when no result in jquery autocomplete当jQuery自动完成没有结果时插入谷歌地图自动完成输入
【发布时间】：2013-11-29 15:33:51
【问题描述】：

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

当没有结果时，我想用谷歌地图自动完成字段附加 HTML 作为结果。

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

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

http://jsfiddle.net/8GnZB/31/

$( "#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)'] })

        }
    }
});

我不想关闭自动完成表单，你能帮帮我吗？

【问题讨论】：

标签： javascript jquery-ui google-maps autocomplete jquery-autocomplete

【解决方案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/

【讨论】：