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

張貼者： 日期：
Typehead

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

首先到 Angular UI Bootstrap 下載該下載的 css 和 js，或直接用 CDN。
view plaincopy to clipboardprint
  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>  

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

然後在 controller 裡放 json 格式的資料
view plaincopy to clipboardprint
  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
view plaincopy to clipboardprint
  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 則是這樣
view plaincopy to clipboardprint
  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 的寫法如下

view plaincopy to clipboardprint
  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

留言

張貼留言