JQuery UI автозаполнения с Google мест - выбор силы и удалить оригинальный вход, двигаясь вверх вниз стрелки

Question

Я следующие JQuery UI автозаполнения, которая захватывает данные из Google мест ...

Проблема у меня в том, что, как только пользователь начинает просматривать список подсказок с помощью стрелок вверх и вниз, исходный ввод также появляется в конце. Я хочу, чтобы удалить этот оригинальный вход, в противном случае, если пользователь нажимает ввести форму сейвы без форсирования выбора ...

// Autocomplete location with google places API 
    $("#edit_profile .location").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "/words/lib/ajax.php", 
       type: "GET", 
       data: "autocomplete_location=1&term=" + request.term, 
       cache: false, 
       success: function(resp) { 
        try { 
         json = $.parseJSON(resp); 
        } catch (error) { 
         json = null; 
        } 
        // 
        if (json && json.status == "OK") { 
         // 
         response($.map(json.predictions, function(item) { 
          return { 
           label: item.description, 
           value: item.description 
          } 
         })); 
         // 
        } 
       } 
      }); 
     }, 
     minLength: 1, 
     change: function (event, ui) { 
      if (!ui.item){ 
       $(this).val(""); 
      } 
     } 
    }); 

Answer 1

Вы беспокоитесь об отключении действия по умолчанию при нажатии [Enter], когда отображается меню автозаполнения?

Если да, то вот решение: добавить флаг на свой вход, и если этот флаг установлен, то предотвратить действие по умолчанию на KeyDown:

var $input = $('input[name="name"]'); 

$input.on('keydown', function(e) { 
    if ($(this).data('acShown') && e.which == 13 /*enter key*/){ 
     e.preventDefault(); 
    } 
}); 
$input.autocomplete({ 
    source: function (request, response) { 
     setTimeout(function() { 
      $input.data('acShown', true); //set the flag when showing the menu 
      response(data) 
     }, 300); 
    }, 
    close: function(){ 
     $input.data('acShown', false); //unset the flag on close 
    } 
}); 

fiddle

В скрипкой: в вы можете видеть, когда отображается меню, нажатие [Enter], когда фокус находится на входе, не приведет к отправке формы - вы останетесь на текущей странице.

Answer 2

Я не уверен, если я понял вопрос правильно, но если я сделал, попробуйте «фокус "вместо метода" change ".

Так что код будет выглядеть следующим образом:

// Autocomplete location with google places API 
$("#edit_profile .location").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "/words/lib/ajax.php", 
      type: "GET", 
      data: "autocomplete_location=1&term=" + request.term, 
      cache: false, 
      success: function(resp) { 
       try { 
        json = $.parseJSON(resp); 
       } catch (error) { 
        json = null; 
       } 
       // 
       if (json && json.status == "OK") { 
        // 
        response($.map(json.predictions, function(item) { 
         return { 
          label: item.description, 
          value: item.description 
         } 
        })); 
        // 
       } 
      } 
     }); 
    }, 
    minLength: 1, 
    focus: function (event, ui) { 
     if (!ui.item){ 
      $(this).val(""); 
     } 
    } 
}); 

Answer 3

Вы не можете поймать это с конечно изменение событий это произойдет раньше, поэтому я попытался изменить его, чтобы сосредоточиться событие, но это событие только вызывается при выборе л из списка предложений. Также я считаю, что поведение по умолчанию имеет логику, потому что, если я не нашел то, что хочу в списке, мне бы хотелось иметь возможность вернуться и продолжить печатать.

Но в любом случае, если вы хотите изменить это поведение, вы можете запретить пользователю доступ к полю ввода после возврата ajax. Например, с полем предложения предлагать над полем ввода.

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: block; width: 298px;"> 

Вот demo.