1 つの請求書が N 人の顧客になる可能性があるため、フォームに顧客データを設定するには、タグ付けでオートコンプリートを使用する必要があります。このタスクを作成するためにいくつかのタグとオートコンプリート ツールを試してみましたが、その方法がわかりません。例を示します。Json サンプル ファイル:
{
"data": {
"LastId": 13,
"ResultObject": [
{
"Name": "David Lastra",
"customerId": 1,
"son": [
{
"Name": "Junior",
"customerId": 9,
"son": null,
"parent": 1,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
},
{
"Name": "Frank",
"customerId": 10,
"son": null,
"parent": 1,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
},
{
"Name": "Gustavo",
"customerId": 11,
"son": null,
"parent": 1,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
},
{
"Name": "Mike",
"customerId": 12,
"son": null,
"parent": 1,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
}
],
"parent": null,
"isLeaf": false,
"level": "0",
"expanded": true,
"loaded": true
},
{
"Name": "Jorge Lastra",
"customerId": 2,
"son": [
{
"Name": "Jose",
"customerId": 13,
"son": null,
"parent": 2,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
}
],
"parent": "null",
"isLeaf": false,
"level": "0",
"expanded": true,
"loaded": true
},
{
"Name": "Arturo Lastra",
"customerId": 3,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Lennin González",
"customerId": 4,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Alejandro Gómez",
"customerId": 5,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Humberto Correa",
"customerId": 6,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Fernando Perez",
"customerId": 7,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Franklin González",
"customerId": 8,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
}
]
}
}
jquery と select2 のコード:
$('#testTags').select2({
placeholder: 'Customers'
, tags : true
, tokenSeparators : [',']
, multiple : true
, minimumInputLength: 1
, ajax: {
url : 'route/to/Customers.json'
, dataType : 'json'
, quietMillis : 100
, data : function (term, page) {
return { term: term };
}
, results : function(data, page) {
var myData = [];
$.each(data.data.ResultObject, function (index, item){
myData.push({
id : item.customerId
, text : item.Name
});
});
return {results: myData};
}
}
, createSearchChoice: function(term, data) {
var customers = $.grep(data, function(c){
return c.text.indexOf(term) > -1;
});
console.log(customers);
if ($(customers).filter(function() {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id : term,
text: term
};
}
}
, query: function(q) {
console.log(q);
var lData = { results: [] };
var lResult = null;
$.ajax({
type : 'GET'
, url : 'route/to/Customers.json'
, dataType : 'json'
, beforeSend: function () {
}
, success : function (data) {
lResult = data.data.ResultObject;
$.each(lResult, function() {
console.log(q.term.length);
//if(q.term.length == 0 || this.Name.toUpperCase().indexOf(q.term.toUpperCase()) >= 0){
lData.results.push({ id: this.customerId, text: this.Name });
//}
});
$('#testTags').select2('data', lData);
console.log(lData);
q.callback(lData);
}
, error : function (xhr, ajaxOptions, throwError) {
}
});
}
});
OK、最初に ajax を試み、すべてのデータを取得します。問題ありません。結果オブジェクトからデータをフィルタリングして入力フィールドに表示しようとすると問題が発生するため、これを解決するには、createSearchChoice関数を使用します、しかし、ここから解決する方法がわかりません。使用しようとしまし$.grepたが、配列を取得し、この配列はこの関数の戻り値では機能しません。query次に、関数とインターン ajax 呼び出しを試しますが、非同期呼び出しのため機能しません。もちろん、query関数ajaxを使用するときは、 の関数は使用せselect2ず、 も使用しませんcreateSearchChoice。ローカルデータをフィルタリングするには、 を試してみまし$.grepたが、結果オブジェクトを作成するには用語条件が必要です。関数select2を使用するときajax、結果関数に「用語」条件がありません。
どんな助けでも大歓迎です。どうもありがとうございました。私の英語を許してください！
----------
Selectize.jsこのソリューションにより適したライブラリ ( ) を見つけました。ここに例を示します。ソースjsonは同じです。selectTag入力または選択タグになります。
$.ajax({
url: 'route/to/Customers.json'
, dataType: 'json'
, success: function(data) {
console.log(data);
$('#selectTag').selectize({
maxItems: null
, theme: 'display'
, valueField: 'customerId'
, searchField: 'Name'
, options: data.data.ResultObject
, render: {
option: function(data, escape) {
return '<div class="testOption"><span class="names" style="color: red !important;">' + escape(data.Name) + '</span></div>';
}
, item: function (data, escape) {
return '<div class="testItem"><span class="names" style="border-radius: 3px; background-color: black; color: red; border-color: red;">' + escape(data.Name) + '</span></div>';
}
}
, create: function (input) {
return {
customerId: 0
, Name: input
};
}
});
}
});
$('#selectTag').each(function(){
var $container = $('<div>').addClass('resultTags').html('Current value: ');
var $value = $('<span>').appendTo($container);
var $input = $(this);
var update = function(e) { $value.text(JSON.stringify($input.val())); }
$(this).on('change', update);
update();
$container.insertAfter($input);
});
私はまだ新しい提案を受け入れています。どうもありがとうございました！