Живой поиск - глюк при работе с планшета

293

25 февраля 2017, 06:19

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

Если пользоваться с планшета, то при клике на вариант он сначала подставляет выбор в input, а скрывает выпадающий список только после повторного клика по выбранному варианту.

Как это исправить? Спасибо!!

$(function() { 
 
  //Живой поиск 
  $('.who').bind("change keyup input click", function() { 
    if (this.value.length >= 2) { 
      $.ajax({ 
        type: 'post', 
        url: "search_car.php", //Путь к обработчику 
        data: { 
          'referal': this.value 
        }, 
        response: 'text', 
        success: function(data) { 
          $(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке 
        } 
      }) 
    } 
  }) 
 
  $(".search_result").hover(function() { 
    $(".who").blur(); //Убираем фокус с input 
  }) 
 
  //При выборе результата поиска, прячем список и заносим выбранный результат в input 
  $(".search_result").on("click", "li", function() { 
    s_user = $(this).text(); 
    $(".who").val(s_user); 
    $(".search_result").fadeOut(); 
  }) 
 
 
  $(document).mouseup(function(e) { // событие клика по веб-документу 
    var div = $(".search_result"); // тут указываем ID элемента 
    if (!div.is(e.target) // если клик был не по нашему блоку 
      && 
      div.has(e.target).length === 0) { // и не по его дочерним элементам 
      div.hide(); // скрываем его 
    } 
  }); 
 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" size='5' name="referal" value="" class="who" id='css-input' autocomplete="off"> 
<ul class="search_result"></ul>