Как получить атрибуты данных выбранного элемента при фокусировке

Question

Как следует из заголовка, я хотел бы знать, есть ли способ получить атрибуты данных элемента, по которому щелкают во время события focusout.

Моя страница выдает результаты поиска в виде небольшого отступа на стороне, когда пользователь вводит данные для поиска. Проблема в том, что когда фокус теряется от ввода, я хочу, чтобы результаты поиска исчезли. Для этого я написал следующий код:

$('#chat-search').focusout(function(){
    $('#chat-search').val(""); //Search input is cleared
    $('.search-results').hide(); //The search results div is hidden
    $('.people').show(); // Shows the previous div that was taken up by the search results
});

Проблема в том, что мне нужно получить информацию из нажатого элемента div, содержащегося в классе результатов поиска. У div, содержащего данные, есть класс search-person, и их много в div-результатах поиска.

$('body').on('click', '.search-person', function(){
    var userId = $(this).attr("data-id");
    console.log(userId);
    $('#chat-search').addClass('center-text');
    $('#chat-search').val("");
    $('.search-results').hide();
    $('.people').show();
});

Функция щелчка search-person не срабатывает, потому что событие focusout скрылоэлемент, который был нажатФокусировка всегда появляется для срабатывания до события нажатия.

Я попытался вызвать обычное событие нажатия, чтобы при нажатии пользователем чего-либо, что не является результатами поиска или вводом, выполнялся тот же код, что и в описанном выше методе. Этот обходной путь не идеален, так как он не срабатывает, если ввод поиска теряет фокус, потому что пользователь нажал клавишу Tab.

$('body').on('click', function(e){
    if ($(e.target).is($('#chat-search'))){ // If the search input is selected
        $('#chat-search').removeClass('center-text');
        $('.search-results').val("");
        $('.people').hide();
        $('search-results').show();
    }
    else if (!($(e.target).is($('.search-person')))){ 
        // If the selected element is neither the search input nor the search result
        $('#chat-search').addClass('center-text');
        $('#chat-search').val("");
        $('.search-results').hide();
        $('.people').show();
    }
});

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

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

<div class="search-container">
    <input id="chat-search" class="chat-search center-text" placeholder="Search Users">
</div>
<div class="user-container scrollbar">
    <ul class="people">
    </ul>
    <ul class="search-results">
    </ul>
</div>

И в результатах поиска ul результаты с этим HTML генерируются посредством запроса ajax.

<li class="search-person" data-id="someId">
    <div class="search-left">
        <img class="search-image" src="someurl">
    </div>
    <div class="search-right">
        <div class="search-name">
            Text here
        </div>
    </div>
</li>

Answer 1

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

$('#chat-search').focusout(function(){
    setTimeout(function(){
        console.log("focus out!");
        $('#chat-search').addClass('center-text');
        $('#chat-search').val("");
        $('.search-results').hide();
        $('.people').show();
    }, 300)
});