input:focusOut + element
 

Доброго времени суток!

Имеем:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>div div{height: 30px;}</style>
<input type="text">
<div style="height: 60px; overflow-y: scroll; width: 40px;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<script>
  
    $('input').trigger('focus').on('focusout', function () {
        $(this).hide().next().hide();
    });
</script>

http://jsfiddle.net/wx3qgxpb/

В результате хотим получить, что бы при клики на скролл у элемента DIV не активировалось событие focusout у input, тем самым не скрывало два html элемента (что-то подобие Autocomplete).

Что посоветуете сделать?

P.S. интересно идеи реализации, код можно не кидать.

Спасибо!