使用alpacajs创建外键预输入文本字段时遇到一些麻烦。目标是具有一个数据对列表（实际> 2000）和大数组（实际> 200）。我开始使用带有dataSource属性的select字段，它适用于小型数据集，但不适用于大型数组。
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str.text)) {
matches.push(str);
}
});
cb(matches);
};
};
var data = [{
value: 1,
text: 'Alabama'
},
{
value: 2,
text: 'Alaska'
},
{
value: 3,
text: 'Arizona'
},
{
value: 4,
text: 'Arkansas'
},
{
value: 5,
text: 'California'
},
{
value: 6,
text: 'Colorado'
},
{
value: 7,
text: 'Connecticut'
},
{
value: 8,
text: 'Delaware'
},
{
value: 9,
text: 'Florida'
},
{
value: 10,
text: 'Georgia'
},
{
value: 11,
text: 'Hawaii'
},
{
value: 12,
text: 'Idaho'
},
{
value: 13,
text: 'Illinois'
},
{
value: 14,
text: 'Indiana'
},
{
value: 15,
text: 'Iowa'
},
{
value: 16,
text: 'Kansas'
},
{
value: 17,
text: 'Kentucky'
},
{
value: 18,
text: 'Louisiana'
},
{
value: 19,
text: 'Maine'
},
{
value: 20,
text: 'Maryland'
},
{
value: 21,
text: 'Massachusetts'
},
{
value: 22,
text: 'Michigan'
},
{
value: 23,
text: 'Minnesota'
},
{
value: 24,
text: 'Mississippi'
},
{
value: 25,
text: 'Missouri'
},
{
value: 26,
text: 'Montana'
},
{
value: 27,
text: 'Nebraska'
},
{
value: 28,
text: 'Nevada'
},
{
value: 29,
text: 'New Hampshire'
},
{
value: 30,
text: 'New Jersey'
},
{
value: 31,
text: 'New Mexico'
},
{
value: 32,
text: 'New York'
},
{
value: 33,
text: 'North Carolina'
},
{
value: 34,
text: 'North Dakota'
},
{
value: 35,
text: 'Ohio'
},
{
value: 36,
text: 'Oklahoma'
},
{
value: 37,
text: 'Oregon'
},
{
value: 38,
text: 'Pennsylvania'
},
{
value: 39,
text: 'Rhode Island'
},
{
value: 40,
text: 'South Carolina'
},
{
value: 41,
text: 'South Dakota'
},
{
value: 42,
text: 'Tennessee'
},
{
value: 43,
text: 'Texas'
},
{
value: 44,
text: 'Utah'
},
{
value: 45,
text: 'Vermont'
},
{
value: 46,
text: 'Virginia'
},
{
value: 47,
text: 'Washington'
},
{
value: 48,
text: 'West Virginia'
},
{
value: 49,
text: 'Wisconsin'
},
{
value: 50,
text: 'Wyoming'
}
];
$(document).ready(function() {
$("#alpaca-form").alpaca({
"data": {
// the data also contains the value (id) as startup
"mainState": "Maine",
"states": ["Washington", "Delaware"]
},
"schema": {
"type": "object",
"properties": {
"mainState": {
"type": "string"
},
"states": {
"type": "array",
"items": {
"type": "string"
}
}
}
},
"options": {
"fields": {
"mainState": {
"type": "text",
"placeholder": "Select State",
"typeahead": {
"config": {
"autoselect": true,
"highlight": true,
"updater": true,
"hint": true,
"minLength": 1
},
"datasets": {
"limit": 10,
"displayKey": "text",
"source": substringMatcher(data)
}
}
},
"states": {
"label": "List of States",
"type": "array",
"toolbarSticky": true,
"actionbarStyle": "right",
"items": {
"type": "text",
"placeholder": "Select State",
"typeahead": {
"config": {
"autoselect": true,
"highlight": true,
"hint": true,
"minLength": 1
},
"datasets": {
"limit": 10,
"displayKey": "text",
"source": substringMatcher(data)
}
}
}
}
},
"form": {
"attributes": {
"action": "#",
"method": "POST"
},
"buttons": {
"validate": {
"title": "Show JSON",
"click": function() {
this.refreshValidationState(true);
if (this.isValid(true)) {
swal("Valid value", JSON.stringify(this.getValue(), null, " "), "info");
}
}
}
}
}
}
})
})@import url("https://cdnjs.cloudflare.com/ajax/libs/typeahead.js-bootstrap-css/1.2.1/typeaheadjs.min.css")
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")
.array-field .alpaca-field .pull-left {
width: 60%;
}
.alpaca-container-item .pull-left {
width: 60%
}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.1/handlebars.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js"></script>
<div class="container mt-2">
<div class="row">
<div class="col-md-12">
<div id="alpaca-form"></div>
</div>
</div>
</div>
答案 0 :(得分：0)
我添加了一个列表复制器，对我来说并没有真正影响性能。
我知道这不是一个真实的答案，因此很高兴稍后将其删除。
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str.text)) {
matches.push(str);
}
});
cb(matches);
};
};
var data = [{
value: 1,
text: 'Alabama'
},
{
value: 2,
text: 'Alaska'
},
{
value: 3,
text: 'Arizona'
},
{
value: 4,
text: 'Arkansas'
},
{
value: 5,
text: 'California'
},
{
value: 6,
text: 'Colorado'
},
{
value: 7,
text: 'Connecticut'
},
{
value: 8,
text: 'Delaware'
},
{
value: 9,
text: 'Florida'
},
{
value: 10,
text: 'Georgia'
},
{
value: 11,
text: 'Hawaii'
},
{
value: 12,
text: 'Idaho'
},
{
value: 13,
text: 'Illinois'
},
{
value: 14,
text: 'Indiana'
},
{
value: 15,
text: 'Iowa'
},
{
value: 16,
text: 'Kansas'
},
{
value: 17,
text: 'Kentucky'
},
{
value: 18,
text: 'Louisiana'
},
{
value: 19,
text: 'Maine'
},
{
value: 20,
text: 'Maryland'
},
{
value: 21,
text: 'Massachusetts'
},
{
value: 22,
text: 'Michigan'
},
{
value: 23,
text: 'Minnesota'
},
{
value: 24,
text: 'Mississippi'
},
{
value: 25,
text: 'Missouri'
},
{
value: 26,
text: 'Montana'
},
{
value: 27,
text: 'Nebraska'
},
{
value: 28,
text: 'Nevada'
},
{
value: 29,
text: 'New Hampshire'
},
{
value: 30,
text: 'New Jersey'
},
{
value: 31,
text: 'New Mexico'
},
{
value: 32,
text: 'New York'
},
{
value: 33,
text: 'North Carolina'
},
{
value: 34,
text: 'North Dakota'
},
{
value: 35,
text: 'Ohio'
},
{
value: 36,
text: 'Oklahoma'
},
{
value: 37,
text: 'Oregon'
},
{
value: 38,
text: 'Pennsylvania'
},
{
value: 39,
text: 'Rhode Island'
},
{
value: 40,
text: 'South Carolina'
},
{
value: 41,
text: 'South Dakota'
},
{
value: 42,
text: 'Tennessee'
},
{
value: 43,
text: 'Texas'
},
{
value: 44,
text: 'Utah'
},
{
value: 45,
text: 'Vermont'
},
{
value: 46,
text: 'Virginia'
},
{
value: 47,
text: 'Washington'
},
{
value: 48,
text: 'West Virginia'
},
{
value: 49,
text: 'Wisconsin'
},
{
value: 50,
text: 'Wyoming'
}
];
function makeDups(data) {
var dups = [];
var delta = data.length;
data.forEach(function(v,i,a){
dups.push({
value: i + delta,
text: v.text + ' ' + (i + delta)
});
});
return dups;
}
for(var i= 0; i< 7;i++) {
data = data.concat(data, makeDups(data));
//alert( 'data size: ' + data.length);
}
alert( 'data size: ' + data.length);
$(document).ready(function() {
$("#alpaca-form").alpaca({
"data": {
// the data also contains the value (id) as startup
"mainState": "Maine",
"states": ["Washington", "Delaware"]
},
"schema": {
"type": "object",
"properties": {
"mainState": {
"type": "string"
},
"states": {
"type": "array",
"items": {
"type": "string"
}
}
}
},
"options": {
"fields": {
"mainState": {
"type": "text",
"placeholder": "Select State",
"typeahead": {
"config": {
"autoselect": true,
"highlight": true,
"updater": true,
"hint": true,
"minLength": 1
},
"datasets": {
"limit": 10,
"displayKey": "text",
"source": substringMatcher(data)
}
}
},
"states": {
"label": "List of States",
"type": "array",
"toolbarSticky": true,
"actionbarStyle": "right",
"items": {
"type": "text",
"placeholder": "Select State",
"typeahead": {
"config": {
"autoselect": true,
"highlight": true,
"hint": true,
"minLength": 1
},
"datasets": {
"limit": 10,
"displayKey": "text",
"source": substringMatcher(data)
}
}
}
}
},
"form": {
"attributes": {
"action": "#",
"method": "POST"
},
"buttons": {
"validate": {
"title": "Show JSON",
"click": function() {
this.refreshValidationState(true);
if (this.isValid(true)) {
swal("Valid value", JSON.stringify(this.getValue(), null, " "), "info");
}
}
}
}
}
}
})
})@import url("https://cdnjs.cloudflare.com/ajax/libs/typeahead.js-bootstrap-css/1.2.1/typeaheadjs.min.css")
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")
.array-field .alpaca-field .pull-left {
width: 60%;
}
.alpaca-container-item .pull-left {
width: 60%
}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.1/handlebars.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js"></script>
<div class="container mt-2">
<div class="row">
<div class="col-md-12">
<div id="alpaca-form"></div>
</div>
</div>
</div>