Написание поля поиска с предложениями. Проблема фокуса Javascript - PullRequest
Новая
       11

Написание поля поиска с предложениями. Проблема фокуса Javascript

1 голос
/ 31 июля 2009

Итак, я пишу в поле поиска для моего сайта. Когда пользователь вводит текст, под полем появляется поле с подсказками для поиска. Предложения доступны для навигации по клавиатуре.

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

Вот как выглядит мой HTML: 

<input type="text" id="search_field" onBlur="hideSuggestions()" />
<div id="suggestions_box">
  <ul>
    <li onClick="doSomething(1)">suggestion1</li>
    <li onClick="doSomething(2)">suggestion2</li>
  </ul>
</div>

Итак, вопрос в том, как я могу скрыть элемент ideas_box, когда фокус покидает поле поиска, , за исключением , когда новый элемент с фокусом - это поле предложений?

Ответы [ 5 ]

1 голос
/ 31 июля 2009

Сохраните div вашего предложения внутри тега формы, затем поместите onBlur в форму. 

<form id="myform" onBlur="hideSuggestions()" >
    <input type="text" id="search_field" />
    <div id="suggestions_box">
        <ul>
          <li onClick="doSomething(1)">suggestion1</li>
          <li onClick="doSomething(2)">suggestion2</li>
        </ul>
    </div>
 </form>

[править] Я думаю, что это сработает, но сейчас я не могу это проверить. Ссылка на javascript в w3schools говорит, что тег формы поддерживает onblur, но я не знаю, означает ли это, что он должен быть в элементе формы или просто внутри тега формы. [/ Edit]

0 голосов
/ 22 июля 2017 
   <input type="text" id="search_field" onBlur="hideSuggestions()" />
    <div id="suggestions_box">
      <ul>
        <li onClick="doSomething(1)">suggestion1</li>
        <li onClick="doSomething(2)">suggestion2</li>
      </ul>
    </div>

Вы можете использовать щелчок мыши на элементе body, а затем проверить отображение предложения на предмет правильной обработки. 

$('body').click(function(e){
   if($('.suggestions_box>ul').is(':visible')) $('.suggestions_box>ul').hide();
})

У меня есть пример, к которому вы можете обратиться здесь ( doc truyen ), надеюсь, это поможет вам

0 голосов
/ 16 ноября 2015


Здесь вы можете использовать css. Сценарий Java не требуется.

CSS будет выглядеть следующим образом. 

#search_field:focus+#search_box
{
     display:block;
}
#search_box
{
     display:none;
}
0 голосов
/ 10 июня 2011

У меня была такая же проблема, и я столкнулся с этим вопросом. Я тоже использую jQuery, и mouseout - единственное событие, имеющее relatedTarget. Фактически, вероятно, ни один из текущих браузеров не поддерживает это (только что проверил Firefox 4 и IE 9).

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

event.target - это jQuery-элемент, где вы можете искать все виды вещей, таких как nodeName, id и className. 

$(document).mousedown(function(event) {
if (ongoingSearch) {
    if (event.target.className != "uniqueClassname") {
        hideSuggestions();
    }
}

});

0 голосов
/ 31 июля 2009

Попробуйте это.

Сначала убедитесь, что вы передаете событие blur в функцию hideSuggestions: 

<input type="text" id="search_field" onblur="hideSuggestions(event)" />

Далее, проверьте, не было ли размытие вызвано событием внутри поля предложений: 

function hideSuggestions(event) {
    var target = event.relatedTarget || event.toElement,
        suggestions = document.getElementById('suggestions_box');

    if (contains(suggestions, target))
        // user did something inside suggestions box.
        return; // Do nothing.

    // box hiding code as before...
}

// contains(haystack, needle): fast lookup of whether haystack is a parent of needle.
var contains = document.compareDocumentPosition
             ? function(a, b) { return !!(a.compareDocumentPosition(b) & 16) }
             : function(a, b) { return a !== b && (a.contains ? a.contains(b) : true) };
...