Stop division from loss of focus

Question

I have an autocomplete function attached to an input tag with the id keyword. Autocomplete results are visible in the section with identification results and each element of the result inside the division with the class element. Here is the HTML markup:

<input name='institute' type="text" placeholder="Start typing.."id="keyword">
<div id="results">
    <div class="item"><p>Item 1</p></div>
    <div class="item"><p>Item 2</p></div>
    <div class="item"><p>Item 3</p></div>
</div>

The division results have a fixed height. Here is the CSS:

width:80%;
height: 200px;
overflow-y: auto;

Here is my part of jquery related to my question

$("#keyword").blur(function() {
    $("#results").fadeOut(500);
  })
  .focus(function() {
    $("#results").show();
  });

Now the problem occurs whenever the height of the results exceeds 200px. I get a scroll, but whenever I click on the scroll, the keyword of the input tag loses focus and the split results disappear. I want to keep the division results when I use the scroll and disappear only after selecting the item. How to fix it?

Answer 1

Chrome IE:

var canBlur= true;

$('#results')
  .mousedown(function(event) {
    canBlur= event.target.id !== 'results';
  })

$(document)
  .mousemove(function() {
    if(!canBlur) {
      $('#keyword').focus();
    }
    canBlur= true;
  });

$('#keyword')
  .blur(function(event) {
    if(canBlur) {
      $('#results').fadeOut(500);
    }
  })
  .focus(function() {
    $('#results').fadeIn(0);
  })

Fiddle

Answer 2

, . , div , div. input, div .

Answer 3

Use a keypress event instead of a blur, as shown below.

$("#keyword").keypress(function () { 
    $("#results").fadeOut(500);
}).focus(function () {
    $("#results").show();
});