javascript - 如何将自定义模板与 Angucomplete-alt 一起使用？

Question

我正在使用 ES6 和 Angular 开发前端应用程序。我正在尝试创建一个具有自动完成功能的搜索框，并且我想使用 Angucomplete-alt 的选项列表使用自定义模板.

我创建了一个模板，但选项仍然具有标准格式，并且执行不会抛出错误。 examples page没有示例模板。

有人可以给我一个如何创建模板的示例吗？

我的搜索框:

<angucomplete-alt id="country-search"
                placeholder="Search countries"
                pause="100"
                selected-object="selectedCountry"
                local-data="getCountries()"
                search-fields="name"
                title-field="name"
                minlength="1"
                template-url="/country-list-item.html"
                input-class="form-control form-control-small"></angucomplete-alt>

模板:

<div class="autocomplete-template">
    <div class="left-panel" style="display: inline-block;">
        <span class="flag-icon flag-icon-{{ ::data.isoCode | lowercase}}"></span>
    </div>
    <div class="right-panel" style="display: inline-block;">
        <span ng-bind-html="$highlight($getDisplayText())"></span>
    </div>
</div>

欢迎所有建议。

谢谢。

Answer 1

我已经解决了。我从示例页面的 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>