Input field not editable after typing into it

Question

I have a simple input field like so:

<input type="edit" name="search" placeholder="Start Searching..." id="sb">

and it was working fine for test purposes until I had to put in some JavaScript to make it do stuff. Now it works but after typing in it for awhile and it loses focus, I can't click back into it.

The JavaScript that I have detects when there is change in the text in the input field and when there is, it does stuff. Using this How to detect a textbox's content has changed

jQuery('#sb').on('input propertychange paste', function() {
    // do your stuff
});

This JavaScript renders a bunch of elements to the page directly below the search bar.

Answer 1

This JavaScript renders a bunch of elements to the page directly below the search bar.

This was the key; once I typed this, I knew what was going on.

as shown by the white rectangle, this was the area that was overlapping the search bar. This was the div that held what was being rendered by the JavaScript. I was able to type in it before it was rendered because it didn't exist and I couldn't type in it afterwards because the stuff rendered was "on top of it". So I just had to add to quick lines of CSS and it fixed the problem.

#sb { z-index: 0; }
#results { z-index: -999; }

where #sb is the id for the input field and #results is the id for the div below it being rendered by my JavaScript.