带图标的搜索框实现

1、带图标的搜索框实现，首先引入bootstarp环境，引入图标库

<link rel="stylesheet" href="assets/vendor/select2-bootstrap-theme/select2-bootstrap.min.css" />

<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />

<script src="assets/vendor/jquery/jquery.js"></script>

<script src="assets/vendor/bootstrap/js/bootstrap.js"></script>

2、html页面写法

写一个div容器，然后将内容添加进入div容器，如下所示：

<div class='col-sm-3'>
	<span class="inputSearch" id="searchInput">
		<input type="text" class="form-control input-sm" id='search' name="search" value="" placeholder="Search" autocomplete="on"/>
	</span>
	<span class="searchTubiao" id="searchTubiao">
		<a href="#" title="搜索" class="fa fa-search" id="tubiao"></a>
	</span>
</div>

css样式设置，宽度以及偏移距离根据实际情况决定：

<style>
    /*带搜索图标的搜索框样式*/
    #searchInput{float: left;width:235.25px;}
    #searchInput .form-control{border: 1px solid #AAAAAA;}
    #searchInput .search{border: 1px solid #0088CF;}
    #searchTubiao{float:left;font-size:16px;margin-left:-20px;margin-top:2px;}
    #searchTubiao a{color:#AAAAAA;text-decoration:none;}
    #searchTubiao a:hover {text-decoration:none;color: #0088CF;}
    #searchTubiao .tubiao{color: #0088CF;}
</style>

设置样式的js如下：

<script type="text/javascript">
    $("#search").focus(function(){
		$("#search").addClass("search");
		$("#tubiao").addClass("tubiao");
	});

	$("#search").blur(function(){
		$("#search").removeClass("search");
		$("#tubiao").removeClass("tubiao");
	})
</script>

一个简单的input框内嵌图标的搜索框实现样式如下：

获得焦点时：

没有获取焦点并且鼠标在搜索图标外部时的样式：

没有获取焦点，鼠标在搜索图标上时的样式：

谨以此博客，记录一次小小的实践。