JQuery автозаполнение выбора мыши запускает событие размытия - PullRequest
Новая
       8

JQuery автозаполнение выбора мыши запускает событие размытия

8 голосов
/ 04 августа 2011

Я использую jQuery UI .autocomplete(), который мне очень нравится.У меня есть одна серьезная проблема, которую я не могу решить.

Когда я набираю букву, скажем s и stackoverflow появляется в раскрывающемся меню, и я используюмышь, чтобы выбрать stackoverflow , затем поле ввода временно теряет фокус, что вызывает событие onblur.

Хотя технически поле ввода blur изменяется, когда я нажимаюЭто противоречит интуиции юзабилити.Как я могу исправить это раздражающее поведение?

Ответы [ 3 ]

18 голосов
/ 04 августа 2011

вы можете попробовать использовать событие открытия и закрытия автозаполнения пользовательского интерфейса jQuery для управления событием размытия вашего текстового поля. Когда автозаполнение открыто, вы отключаете событие размытия, а когда оно закрывается, вы снова включаете событие размытия. Я настроил рабочий пример на jsfiddle.net . Надеюсь, это поможет. 

var disable=false;

$( "#tags" ).autocomplete({
  source: availableTags,
  open: function(event, ui) { disable=true },
  close: function(event, ui) {
    disable=false; $(this).focus();
  }
}).blur(function() {
  if(!disable) {
    alert('blur');
  }
});
0 голосов
/ 08 мая 2017

Несмотря на то, что приведенный выше ответ drzone88 работает отлично, я наткнулся на один крайний случай, о котором следует упомянуть: когда вы выполняете поиск и у вас нет результатов, событие close никогда не вызывается.Тогда ваша функция размытия также никогда не будет вызвана.Поэтому я решил установить флаг, когда содержимое ответа пусто.

Мое решение также использует jquery.data (), поэтому нам не нужно перетаскивать переменную вокруг: 

$( ".selector" ).autocomplete({
  source: ["your values here"],
  open: function(event, ui) { $(this).data("no-blur", true); },
  close: function(event, ui) {
    $(this).data("no-blur", false);
  },
  response: function(event, ui){
    if(ui.content.length == 0) //when search results are empty, close is not called
      $(this).data("no-blur", false);
    else
      $(this).data("no-blur", true); //not sure open is called again either if we re-get results
  }
}).on("blur", function() {
  if(!$(this).data("no-blur")) {
    //do something
  }
});

КакОказывается, однако, из-за порядка, в котором вызываются события, и того, что мне действительно нужно было сделать (запустить что-то при размытии, когда пользователь стирает поле без выбора опции в списке предложений), я закончилдо установки моего флага noblur в значение true в начале функции выбора и обратно в значение false в конце размытия, например, так: 

$( ".selector" ).autocomplete({
  source: ["your values here"],
  select: function(ui, event){
    $(this).data("no-blur", true);
    //do select stuff
  },

}).on("blur", function() {
  if(!$(this).data("no-blur")) {
    //do something
  }
  $(this).data("no-blur", false);
});

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 04 августа 2011

что у тебя на размытии?Это немного странно, но вы можете сделать setTimeout с относительно небольшой задержкой для обработчика вашего размытия.Затем вы можете установить переменную в обработчике события фокуса автозаполнения и сказать, чтобы ваш обработчик размытия не срабатывал.

...