Вставить ввод автозаполнения карт google, если в автозаполнении jquery нет результата

У меня есть ввод с автозаполнением jQuery. Доступные теги для автозаполнения - города или страны.

Когда результата нет, я хотел бы добавить HTML как результат с полем автозаполнения карты Google.

Мне с трудом удалось это сделать, но когда я выбираю (щелкая) город, предложенный картой Google, автозаполнение jQuery закрывается ...

  1. Введите 'x'
  2. Щелкните правой кнопкой мыши «местоположение» (есть ошибка, ничего не происходит, если щелкнуть левой кнопкой мыши поле «местоположение» ...), а затем введите местоположение «например, Нью-Йорк»)
  3. Щелкните левой кнопкой мыши по предложению «Нью-Йорк», и автозаполнение закроется!

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)'] })

        }
    }
});

Я не хочу, чтобы форма автозаполнения закрывалась, вы можете мне помочь?


google-maps javascript autocomplete jquery-ui jquery-autocomplete
person user1479978    schedule 29.11.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, что вы используете правильный подход, добавляя форму карты непосредственно к результатам. Я думаю, вам следует поместить форму в отдельный 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/

person brian    schedule 29.11.2013