Friday, December 13, 2013

Search box with a link inside

Doing a project, I had to implement a search-box with link inside in knockout-bootstrap environment. Before doing something like this, I Googled the Internet and found out that there is no solution on popular sites. So, I decided to write by myself. It a very easy and very elegant piece of code.

Here it is:
<div class="row">
    <div class="btn searchcontainer" id="searchcontainer"><input type="search" placeholder="Search Catalog..." style="width:15em; border: 0px;" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a></div>
</div>

Couple days later... Placeholder does not work in IE9. I had to come up with some different code and I did:

 <div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px;">
               <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;")" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a>
            </div>

I think, it will work for IE 9 and IE 10 (cross the fingers)

No comments:

Post a Comment