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>