2017-07-31 12 views
0

私の申請書で、私はangucomplete-alt(人の検索の例)指示文を使ってオートコンプリートドロップダウンを実装しました。ここはリンクclick here see example 2です。これはTwitterの検索フィールドに似ています。私は正確にtwitterユーザーの検索のような出力を得ていますが、検証されたアカウントの青いダニが見付かりません。実際には、検証されたかどうかはわかりませんが、angucomplete-altテンプレートをカスタマイズする方法はわかりません。このような人々の検索のためにangucomplete-altテンプレートをカスタマイズするにはどうすればよいですか?

答えて

0

何か:

<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

関連する問題