如何把一個HTML文本輸入框裏面FA-搜索？

Question

我有一個搜索框，它的東西在輸入box.The搜索圖標類型從數據庫中給出的名字，點擊後給所有從數據庫中該特定name.Now我想要搜索圖標是文本中的數據盒子，而不是外面..我該怎麼辦？

HTML：

<div class='col-md-6'> 
<label for='search' class='control-label col-md-4'> Search</label> 
<div class='col-md-4'> 
[![enter image description here][1]][1]<input autocomplete="off" type="text" ng-model="patName" id="patName" placeholder="Patient Name" class="form-control" min-length="4" uib-typeahead="pat.pName as pat.pName for pat in patients($viewValue)" typeahead-editable="false" > 
<input type="hidden" id="patientId" min-length="4" ng-model="AddqueryArr.patient" value="{{pat.pName}}"> 

</div> 
<div class='col-md-2'> 

<a href> 
<i class='fa fa-search' id="myimage" ng-click='getnames(AddqueryArr.qfrom,patName.pName)'></i></a> 
<br> 
</div> 

Answer 1

您可以自定義CSS的短短几行位置的圖標：

.search-icon { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 25px; 
 
    margin-top: -10px; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 

 
<br><br><br> 
 

 
<div class="col-md-4"> 
 
    <input autocomplete="off" type="text" ng-model="patName" id="patName" placeholder="Patient Name" class="form-control" min-length="4" uib-typeahead="pat.pName as pat.pName for pat in patients($viewValue)" typeahead-editable="false" /> 
 
    <input type="hidden" id="patientId" min-length="4" ng-model="AddqueryArr.patient" value="{{pat.pName}}" /> 
 
    <a href="#" class="search-icon"> 
 
     <i class="fa fa-search" id="myimage" ng-click="getnames(AddqueryArr.qfrom,patName.pName)"></i> 
 
    </a> 
 
</div>

Answer 2

回答你從Bootstrap Documentation需要。

你也可以通過添加.has-feedback和右邊的圖標添加可選的反饋圖標。

<div class="form-group has-feedback"> 
    <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"> 
    <span class="fa fa-search" aria-hidden="true"></span> 
</div> 

Answer 3

試試這個 -

<div class="col-md-4" style="padding-left: 0px;">    
    <div class="input-prepend-inner pull-left" > 
    <span class="add-on"><i class="fa fa-search"></i></span> 
    <input ng-model="" class="searchInput col-md-7" placeholder=""> 
    </div> 
</div> 

.add-on { 
position: absolute; 
top: 3px; 
left: 8px; 
z-index: 100; 
} 
.searchInput { 
    padding-left: 33px; 
}