Search Bar

Testing of the Search Bar

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<img src="http://i.imgur.com/lFkqn.png" class="glyphicon glyphicon-search">

<!-- <span class="glyphicon glyphicon-search"></span> -->

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');


.left {
    float:left;
}
.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.wrap {
    position:relative;
    padding:5px 6px 6px 7px; /* readjust in jsfiddle*/
    background:#f0f0f0;
    border:1px solid #ccc;
    overflow:hidden;
}
.search {
    width:360px;
    position:relative; top:2px; /* readujst in jsfiddle */
    padding:8px 5px 8px 30px;
    border:1px solid #ccc;
    background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
}

JavaScript

$(".glyphicon.glyphicon-search").on("click", function(){
	
	console.log("Inside Search");
	// inserts a new search_bar
	var search_bar = document.createElement("input");
	search_bar.setAttribute("type", "text");
	search_bar.setAttribute("class", "form-control search left rounded");
	search_bar.setAttribute("id", "search-bar");
	search_bar.setAttribute("placeholder", "search");
	search_bar.setAttribute("ng-model", "search.name");


	$(this).parent().replaceWith(search_bar);

});