模仿高德地图的搜索框的样式

分手后的思念是犯贱 2022-06-03 10:47 212阅读 0赞

html：

<div class="indexSearch">  
<form>  
<input id="searchInput" ng-model="furnitureName"  placeholder="欧式经典雕花" ng-focus="focusing()"

ng-blur="bluring();"  ng-keydown="enterEvent($event)" autocomplete="off" />  
<a href="/sofa?furnitureName=\{ \{furnitureName\}\}"><img src="img/center/ic\_01.png" alt="" /></a>  
</form>  
<label for="" class="searcList" ng-style="labeling">  
<div class="searching" ng-show="searching.flag">  
<ul>  
<a href=""><li ng-repeat="x in searchData"><span>\{ \{x\}\}</span></li></a>  
<a href=""><li><span>床柜镜</span></li></a>  
<a href=""><li><span>床头柜</span></li></a>  
<a href=""><li><span>镜子柜</span></li></a>  
<a href=""><li><span>床柜镜</span></li></a>  
<a href=""><li><span>床头柜</span></li></a>  
<a href=""><li><span>镜子柜</span></li></a>  
<a href=""><li><span>床柜镜</span></li></a>  
<a href=""><li><span>床头柜</span></li></a>  
<a href=""><li><span>镜子柜</span></li></a>  
<a href=""><li><span>镜子柜</span></li></a>  
<a href=""><li><span>床柜镜</span></li></a>  
<a href=""><li><span>床头柜</span></li></a>  
<a href=""><li><span>镜子柜</span></li></a>  
</ul>  
</div>  
<div class="searched" ng-show="searched.flag">  
<ul class="search\_history">  
浏览记录  
<li ng-repeat="y in historyData"><span>\{ \{y\}\}</span></li>  
<a href=""><li><span>床柜镜</span></li></a>  
<a href=""><li><span>床头柜</span></li></a>  
<a href=""><li><span>镜子柜</span></li></a>  
</ul>  
<ul class="search\_hot">  
热门推荐  
<li ng-repeat="z in hotData"><span>\{ \{y\}\}</span></li>  
<a href=""><li><span>床柜镜</span></li></a>  
<a href=""><li><span>床头柜</span></li></a>  
<a href=""><li><span>镜子柜</span></li></a>  
</ul>  
</div>  
</label>  
</div>

css：

/\*搜索\*/  
.searcList\{  
position: absolute;  
right: 10px;  
z-index: 999999;  
width: 0px;  
height: 0;  
    outline: none;  
    padding: 0 15px 0px 5px;  
    font-size: 14px;  
    font-family: regular;  
    color: \#333;  
    background:rgba(253,253,253,0),  
    transition:all 0.5s ;  
    -webkit-transition:all 0.5s;  
   \-moz-transition:all 0.5s;  
   \-ms-transition:all 0.5s;  
   \-o-transition:all 0.5s;  
    text-align: left;  
    overflow: hidden;  
\}  
.searcList li span\{  
color:\#333;  
font-weight: 100;  
\}  
.searcList li:hover span\{  
color:\#C38A3B ;  
\}  
.search\_history li\{  
padding-left: 10px;  
\}  
.search\_hot li\{  
padding-left: 10px;  
\}

js:

$scope.search = \{\};  
$scope.searching = \{\};  
$scope.searched = \{\};  
$scope.search.flag = false;  
$scope.searching.flag = false;  
$scope.searched.flag = false;  
var searchInput = document.getElementById('searchInput');  
$scope.focusing = function() \{  
searchInput.placeholder='';  
$scope.searching.flag = false;  
$scope.searched.flag = true;  
searchInput.oninput = function()\{    
            if(searchInput.value.length == '0')\{  
$scope.searching.flag = false;  
$scope.searched.flag = true;  
\}else if(searchInput.value.length >'0')\{  
$scope.searching.flag = true;  
$scope.searched.flag = false;  
  
\}  
            \}    
  
$scope.labeling = \{  
'width': '240px',  
'height': '256px',  
'background': 'rgba(253,253,253,0.8)',  
\}  
\}  
$scope.bluring = function() \{  
searchInput.placeholder='欧式经典雕花';   
$scope.searching.flag = false;  
$scope.searched.flag = false;  
$scope.labeling = \{  
'width': '0px',  
'height': '0px',  
\}  
\}