如何将fa-search放在HTML输入文本框中？

Question

我有一个搜索框，在输入框中输入内容时会显示数据库中的名称。点击搜索图标会显示该特定名称的数据库中的所有数据。现在我希望搜索图标位于文本框而不是外面......我该怎么办？

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

从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 2

试试这个 -

ebean.distantdatabase = ["models.distantdatabase.*"]

Answer 3

您可以使用几行自定义CSS定位图标：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;