Having some trouble with bootstrap, so some help would be awesome. Thanks
What I would like:(top part)
My current code:
<div class="form-group">
<input type="text"
class="form-control"
id="findJobTitle"
name="findJobTitle"
placeholder="Job Title, Keywords"
onkeyup="showResult()">
</div>
Current Screenshot:
To get something like this
with Bootstrap 3 and Jquery use the following HTML code:
<div class="btn-group">
<input id="searchinput" type="search" class="form-control">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>
and some CSS:
#searchinput {
width: 200px;
}
#searchclear {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
and Javascript:
$("#searchclear").click(function(){
$("#searchinput").val('');
});
Of course you have to write more Javascript for whatever functionality you need, e.g. to hide the 'x' if the input is empty, make Ajax requests and so on. See http://www.bootply.com/121508