Можно ли закрыть модальное окно при нажатии на крестик в input search?

240

21 мая 2018, 03:50

В моем проекте есть <input type="search"> в который я ввожу информацию. Когда я ввожу запрос в поле поиска появляется модальное окно с вариантами поиска, оно пропадает только в том случае, если я удалю весь текст в input при помощи backspace.

У <input type="search"> при написании текста появляется стандартный крестик который стирает текст. И если на него кликнуть, то текст в input пропадает конечно, а вот модальное окно остается и помогает только backspace и перезагрузка страницы.

Вот тут вопрос. Можно ли закрывать модальное окно, когда я буду нажимать на стандартный крестик в <input type="search">?

function lightbg_clr() { 
  $('#qu').val(""); 
  $('#livesearch').css({ 
    "display": "none" 
  }); 
  $("#qu").focus(); 
}; 
 
function fx(str) { 
  var s1 = document.getElementById("qu").value; 
  var xmlhttp; 
  if (str.length == 0) { 
    document.getElementById("livesearch").innerHTML = ""; 
    document.getElementById("livesearch").style.border = "0px"; 
    document.getElementById("livesearch").style.display = "block"; 
    return; 
  } 
  if (window.XMLHttpRequest) { 
    xmlhttp = new XMLHttpRequest(); 
  } else { 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("livesearch").innerHTML = xmlhttp.responseText; 
      document.getElementById("livesearch").style.display = "block"; 
    } 
  } 
  xmlhttp.open("GET", "call_ajax.php?n=" + s1, true); 
  xmlhttp.send(); 
}

<input type="search" />

Answer 1

Для того, чтобы обрабатывать событие нажатия на крестик используйте атрибут событий onsearch. Правда у него есть одна особенность, он срабатывает и при нажатии Enter.

function onSearch() { 
  alert('ты нажал на крестик'); 
}

Введи текст и нажми на крестик. 
<input type="search" onsearch="onSearch()" />

Answer 2

(function($){ 
	var livesearch = $("#livesearch"), 
		qu = $('#qu'), 
		fx = function(e) { 
			var s1 = $.trim(qu.val()), 
				xmlhttp; 
			if (s1.length == 0) { 
				livesearch.html("").hide(); 
				return; 
			} 
			if (window.XMLHttpRequest) { 
				xmlhttp = new XMLHttpRequest(); 
			} else { 
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
			} 
			xmlhttp.onreadystatechange = function() { 
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
					livesearch.html(xmlhttp.responseText).show(); 
				}else{ 
          livesearch.html('error').show(); 
        } 
			}; 
			xmlhttp.open("GET", "call_ajax.php?n=" + s1, true); 
			xmlhttp.send(); 
		}; 
	qu.on('input', fx).trigger('input'); 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="qu" type="search"> 
<div id="livesearch" style="background:#ccc;min-height: 100px;"></div>