Скрыть блок при потере input`a фокуса

12
veleg
На сайте с 30.01.2011
Offline
142
1786

Есть код

$(document).ready(function() {

$('#input-search').bind('textchange', function () {

var input_search = $("#input-search").val();

if (input_search.length >= 2 && input_search.length < 150 )
{
$.ajax({
type: "POST",
url: "/search/search.php",
data: "q="+input_search,
dataType: "html",
cache: false,
success: function(data) {

$("#block-search-result").show();
$("#list-search-result").html(data);

}
});

}else
{
$("#block-search-result").hide();
}

});

});

Как скрыть блок с id=block-search-result, если убрать фокус с поля ввода, например кликнув по пространству вне формы?

Фигачу Телеграм-ботов ( https://teleg.run/veleg )
Z0
На сайте с 03.09.2009
Offline
827
#1

Примерно так, если я вас правильно понял.


$('#input-search')
.focus(function() {
$('#block-search-result').show();
})
.blur(function() {
$('#block-search-result').hide();
});
veleg
На сайте с 30.01.2011
Offline
142
#2

Все работает.

Вот что значит "вопрос поставлен не совсем правильно".

При вводе данных в поле input, блок отображается и результатами. Если попробовать кликнуть на одном из них, то блок исчезает, так как фокус пропал. Как сделать, чтоб можно было кликнуть по ссылке которая находится в блоке #block-search-result?

Z0
На сайте с 03.09.2009
Offline
827
#3
veleg:
Все работает.
Вот что значит "вопрос поставлен не совсем правильно".
При вводе данных в поле input, блок отображается и результатами. Если попробовать кликнуть на одном из них, то блок исчезает, так как фокус пропал. Как сделать, чтоб можно было кликнуть по ссылке которая находится в блоке #block-search-result?

Ничего непонятно 🤪 Скрин дайте хоть :)

tommy-gung
На сайте с 22.11.2006
Offline
304
#4

навигация с клавиатуры обречена

Здесь не могла быть ваша реклама
veleg
На сайте с 30.01.2011
Offline
142
#5
ziliboba0213:
Ничего непонятно 🤪 Скрин дайте хоть :)

Например если введу запрос КНИГИ, и попытаюсь кликнуть на один из результатов, то блок с результатами скроется, а перехода не произойдет.[ATTACH]162255[/ATTACH]

jpg 162255.jpg
veleg
На сайте с 30.01.2011
Offline
142
#6

Скрин прислал ;)

Z0
На сайте с 03.09.2009
Offline
827
#7
veleg:
Например если введу запрос КНИГИ, и попытаюсь кликнуть на один из результатов, то блок с результатами скроется, а перехода не произойдет.

Как это не произойдет перехода по ссылке? Ересь какая-то :)

Проверьте:

1. Ссылка точно есть?

2. z-index у плашек верно задан?

Вы же понимаете, что по скриншоту проблему определить все равно, что гадать на кофейной гуще? 🍿

veleg
На сайте с 30.01.2011
Offline
142
#8
ziliboba0213:
Как это не произойдет перехода по ссылке? Ересь какая-то :)

Проверьте:
1. Ссылка точно есть?
2. z-index у плашек верно задан?

Вы же понимаете, что по скриншоту проблему определить все равно, что гадать на кофейной гуще? 🍿

Ну вот только код.

Ссылки все есть. Если удалить js код (который скрывает блок с результатами при смене фокуса), то переход осуществляется.

2. z-index задан верно.

По логике все верно. Если хотим кликнуть по ссылке, которое находится вне поля ввода, то фокус с inputa убирается, а если он убирается, то поле с результатами исчезает.

Z0
На сайте с 03.09.2009
Offline
827
#9
veleg:
Ну вот только код.
Ссылки все есть. Если удалить js код (который скрывает блок с результатами при смене фокуса), то переход осуществляется.
2. z-index задан верно.

По логике все верно. Если хотим кликнуть по ссылке, которое находится вне поля ввода, то фокус с inputa убирается, а если он убирается, то поле с результатами исчезает.

Если кликнуть вне поля по ссылке, поле скроется, а по ссылке перейдет. У меня так везде.

В общем строить гипотезы и гадать, не видя, что там у вас происходит, устал :) Разбирайтесь сами :p

veleg
На сайте с 30.01.2011
Offline
142
#10
ziliboba0213:
Если кликнуть вне поля по ссылке, поле скроется, а по ссылке перейдет. У меня так везде.

В общем строить гипотезы и гадать, не видя, что там у вас происходит, устал :) Разбирайтесь сами :p

Ну есть код ваш. Просили скрин, прислал скрин, все объяснил.

Вот даже видео как это все происходит.

https://www.youtube.com/watch?v=3zooWCZaSys&feature=youtu.be

Какие ж гипотезы? Все же предоставил.

Если убрать

$('#input-search')
.focus(function() {
$('#block-search-result').show();
})
.blur(function() {
$('#block-search-result').hide();
});

то все работает и нажимается.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий