如何为人员搜索自定义 angucomplete-alt 模板？答案

【问题标题】：how to customize angucomplete-alt template for people search?如何为人员搜索自定义 angucomplete-alt 模板？
【发布时间】：2018-01-06 23:24:51
【问题描述】：

在我的申请表中，我使用 angucomplete-alt(search people example) 指令实现了自动完成下拉菜单。这是链接click here see example 2 它就像推特上的搜索字段。我得到的输出与 twitter 用户搜索完全一样，但缺少经过验证的帐户蓝色勾号实际上我有验证或未验证的数据，但没有得到如何自定义我正在使用 angularjs 1.x 的 angucomplete-alt 模板。

【问题讨论】：

标签： jquery angularjs autocomplete

【解决方案1】：

类似这样的：

<div angucomplete-alt
  id="ex14"
  placeholder="Search countries"
  pause="100"
  selected-object="countrySelected14"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"
  template-url="/my-custom-template.html">
</div>

像这样定义您的自定义模板：

    <script type="text/ng-template" id="/my-custom-template.html">
   <div class="angucomplete-holder" ng-class="{'angucomplete-dropdown-visible': showDropdown}">
    <p>This is custom</p>
     <input ng-model="searchStr"
       ng-disabled="disableInput"
       type="text"
       placeholder="{{placeholder}}"
       ng-focus="onFocusHandler()"
       class="{{inputClass}}"
       ng-focus="resetHideResults()"
       ng-blur="hideResults($event)"
       autocapitalize="off"
       autocorrect="off"
       autocomplete="off"
       ng-change="inputChangeHandler(searchStr)"/>
     <div class="angucomplete-dropdown" ng-show="showDropdown">
       <div class="angucomplete-searching" ng-show="searching" ng-bind="textSearching"></div>
       <div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)" ng-bind="textNoResults"></div>
       <div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseenter="hoverRow($index)" ng-class="{'angucomplete-selected-row': $index == currentIndex}">
         <div ng-if="imageField" class="angucomplete-image-holder">
           <img ng-if="result.image && result.image != ''" ng-src="{{result.image}}" class="angucomplete-image"/>
           <div ng-if="!result.image && result.image != ''" class="angucomplete-image-default"></div>
         </div>
         <div class="angucomplete-title" ng-if="matchClass" ng-bind-html="result.title"></div>
         <div class="angucomplete-title" ng-if="!matchClass">{{ result.title }}</div>
         <div ng-if="matchClass && result.description && result.description != ''" class="angucomplete-description" ng-bind-html="result.description"></div>
         <div ng-if="!matchClass && result.description && result.description != ''" class="angucomplete-description">{{result.description}}</div>
       </div>
       <div class="angucomplete-row" ng-click="selectResult({title: searchStr, originalObject: { name: searchStr, custom: true }})" ng-mouseenter="hoverRow(results.length)" ng-class="{'angucomplete-selected-row': results.length == currentIndex}">
         <div class="angucomplete-title">Select custom country '{{ searchStr }}'</div>
       </div>
     </div>
   </div>
</script>

来自此链接的代码：angucomplete-alt

【讨论】：