Dynamic Bootstrap Popover on empty search

 Searching the Internet for something suitable for my assignment I did not find anything interesting. Some sites are closed, some - not. I came out with my own code, which works in MVC/Bootstrap/Knockout environment.

HTML:

 <div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px; border: 1px solid @(string.IsNullOrEmpty(ViewBag.productListJSON) ? "red" : "#D7D7D7");">
               <input type="search" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" rel="popover" data-placement="left" data-content="No Records Found" data-original-title="Alert" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a>
</div>

Javascript:
<script type='text/javascript'>
         var productList = @Html.Raw(Json.Encode(@ViewBag.productListJSON))
         $(window).load(function() {
             if (productList == "") {
                $("#searchKeyword").popover('show');
            }
         });
    </script>

What it does: it displays a popover only when search return empty set: