AngularJS UI Bootstrap 製作自動提示輸入效果- Typeahead

Typehead

google 搜尋的時候,輸入一些字後就會有下拉建議的字,這個現在用 AngularJS 搭配 UI Bootstrap 做起來也很方便。

首先到 Angular UI Bootstrap 下載該下載的 css 和 js,或直接用 CDN。
  1. <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">  
  2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>  
  3. <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>  

基本用法:
  1. <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">  

然後在 controller 裡放 json 格式的資料
  1. $scope.states = ['Alabama''Alaska''Arizona''Arkansas''California''Colorado''Connecticut''Delaware''Florida''Georgia''Hawaii''Idaho''Illinois''Indiana''Iowa''Kansas''Kentucky''Louisiana''Maine''Maryland''Massachusetts''Michigan''Minnesota''Mississippi''Missouri''Montana''Nebraska''Nevada''New Hampshire''New Jersey''New Mexico''New York''North Dakota''North Carolina''Ohio''Oklahoma''Oregon''Pennsylvania''Rhode Island''South Carolina''South Dakota''Tennessee''Texas''Utah''Vermont''Virginia''Washington''West Virginia''Wisconsin''Wyoming'];  

方便的是還可以自己寫 template 基本用法也很簡單。

我準備這樣的 json
  1. $scope.belongData = [{   
  2.         "name""Captain America",   
  3.         "group""Marvel",   
  4.         "img""captain_america.png"  
  5.       },   
  6.       {   
  7.         "name""Daredevil",   
  8.         "group""Marvel",   
  9.         "img""daredevil.png"  
  10.       },   
  11.       {   
  12.         "name""The Flash",   
  13.         "group""DC COMIC",   
  14.         "img""flash.png"  
  15.       },   
  16.       {   
  17.         "name""Green Lantern",   
  18.         "group""DC COMIC",   
  19.         "img""greenlantern.png"  
  20.       },   
  21.       {   
  22.         "name""Hulk",   
  23.         "group""Marvel",   
  24.         "img""hulk.png"  
  25.       },   
  26.       {   
  27.         "name""Ironman",   
  28.         "group""Marvel",   
  29.         "img""ironman.png"  
  30.       },   
  31.       {   
  32.         "name""Silver Surfer",   
  33.         "group""Marvel",   
  34.         "img""silversurfer.png"  
  35.       },   
  36.       {   
  37.         "name""Spider Man",   
  38.         "group""Marvel",   
  39.         "img""spiderman.png"  
  40.       }   
  41.       ,   
  42.       {   
  43.         "name""Thor",   
  44.         "group""Marvel",   
  45.         "img""thor.png"  
  46.       }   
  47. ];  

html 則是這樣
  1. <input type="text" ng-model="belongSelected" placeholder="Custom template" typeahead="belong as belong.name for belong in belongData | filter:{name:$viewValue}" typeahead-template-url="belongFilter.html" class="form-control">  

從指定的 json 內找特定的資料,裡面有一個 typeahead-template-url 就是用來放自訂的樣式的,template 的寫法如下

  1. <script type="text/ng-template" id="belongFilter.html">   
  2.   <li class="list" >   
  3.     <div class="char_img">   
  4.       <img ng-src="{{match.model.img}}">   
  5.     </div>   
  6.     <div class="cha_name">{{match.model.name}}</div>   
  7.     <div class="cha_group">{{match.model.group}}</div>      
  8.   </li>   
  9. </script>  

把對應的值塞到想塞的地方,再調整樣式就可以了。

Demo

留言

熱門文章