2015-12-04 82 views
1

我使用Alpaca.js生成窗體並從http://www.alpacajs.org/docs/fields/text.html測試自動完成示例#7。以我的本地形式,我在下拉列表中看不到任何值。建議?自動完成結果不顯示使用羊駝形式

<html> 
    <head> 
     <title>Alpaca-Autocomplete Form</title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
     <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
     <link type="text/css" href="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.css" rel="stylesheet" /> 
     <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script> 
     <script type="text/javascript" src="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.js"></script> 
     <!-- typeahead.js https://github.com/twitter/typeahead.js --> 
     <script src="/lib/typeahead.js/dist/bloodhound.min.js" type="text/javascript"></script> 
     <script src="/lib/typeahead.js/dist/typeahead.bundle.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <div id="field7"> </div> 
    <script type="text/javascript" id="field7"> 
     var companies = ["Cloud CMS", "Amazon", "HubSpot"]; 
     $("#field7").alpaca({ 
      "schema": { 
       "type": "string" 
      }, 
      "options": { 
       "type": "text", 
       "label": "Company Name", 
       "helper": "Select the name of a cloud computing company", 
       "typeahead": { 
        "config": { 
         "autoselect": true, 
         "highlight": true, 
         "hint": true, 
         "minLength": 1 
        }, 
        "datasets": { 
         "type": "local", 
         "source": function(query) { 
          console.log("** Searching for autocomplete responses **") 
          var companies = ["Cloud CMS", "Amazon", "HubSpot"]; 
          var results = []; 
          for (var i = 0; i < companies.length; i++) { 
           var add = true; 
           if (query) { 
            add = (companies[i].indexOf(query) === 0); 
           } 
           if (add) { 
            results.push({ 
             "value": companies[i] 
            }); 
           } 
          } 
          return results; 
         } 
        } 
       } 
      } 
     }); 
    </script> 
    </body> 
</html> 

回答

1

使用bower install typeahead.js安裝typeahead.js安裝在此之下bower_components與LIB作爲例子。在如下更新參考之後,該示例正在工作。

<script src="bower_components/typeahead.js/dist/bloodhound.min.js" type="text/javascript"></script> 
<script src="bower_components/typeahead.js/dist/typeahead.bundle.min.js" type="text/javascript"></script>