Autocomplete search bar - inside not consistently clickable

Question

I am building a Rails app and I have a POST route that returns suggestions (using elasticsearch but that's neither here nor there). They are displaying and it looks really good, and with some testing I noticed that if I just make them tags in another section of the site, they get the default underline on mouseover and when I click them it takes me to the desired page. However, I really like the current styling of the search results (I will include a photo) and so I want to understand why when I just click on the "focused" element, it doesn't understand that my clicking it is me clicking the underlying (which is dynamically created in the javascript with a link that is built using a component of JSON that is the id of the object.

Here is the HTML:

      <li> 
        <form style="positive: relative; width: 700px" class="search" id = "autocomplete">
          <div class="input-field">
            <input autocomplete="off" name="q" id="q" type="search"  onBlur="destroy();" onKeyUp="myHandler();" placeholder="Search..." required>
            <label for="search"><i class="mdi-action-search"></i></label>
            <i class="mdi-navigation-close"></i>
          </div>

            <div id="results">
              <ul class="results_list" style="display:none"></ul>
            </div>

        </form>
      </li>

Here is the CSS:

<style>
.search input:focus + .results_list { display: block }

.search .results_list {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #cbcfe2 #c8cee7 #c4c7d7;
    border-radius: 3px;
    background-color: #fdfdfd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: linear-gradient(top, #fdfdfd, #eceef4);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search .results_list li { display: block }


.search .results_list li:first-child { margin-top: -1px }

.search .results_list li:first-child:before, .search .results_list li:first-child:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px outset transparent;
}

.search .results_list li:first-child:before {
    border-bottom: 5px solid #c4c7d7;
    top: -11px;
}

.search .results_list li:first-child:after {
    border-bottom: 5px solid #fdfdfd;
    top: -10px;
}

.search .results_list li:first-child:hover:before, .search .results_list li:first-child:hover:after { display: none }

.search .results_list li:last-child { margin-bottom: -1px }

.search .results_list a {
    display: block;
    position: relative;
    margin: 0 -1px;
    padding: 6px 40px 6px 10px;
    color: #808394;
    font-weight: 500;
    text-shadow: 0 1px #fff;
    border: 1px solid transparent;
    border-radius: 3px;
}

.search .results_list a span { font-weight: 200 }

.search .results_list a:before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -9px;
    background: url("http://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat;
}

.search .results_list a:hover {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    border-color: #2380dd #2179d5 #1a60aa;
    background-color: #338cdf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
    background-image: linear-gradient(top, #59aaf4, #338cdf);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}

li > a {
    display: block;
}

</style>

Photo:

EDIT:

I realized that the above was not the problem. The problem is I added an "onblur" event trigger in my searchbar that triggered a function called "destroy" which is here:

destroy = function() {
    $('.results_list').empty();
    $('.results_list').hide();
}

This function works great for doing what it was designed to do but it introduced a new problem - if I click on the link the "blur" happens, destroying the data that is needed to know where to navigate to. (That is my assumption of what's happening). How can I get around this? The links must work obviously, but of course if someone hovers away the list must be hidden, then destroyed. It appears the event trigger is occurring faster than the redirect. Any help would be appreciated.