jquery-ui 自动完成不使用原始项目

Question

我有以下内容：

class Department {
constructor(data) {
this.id = data && data.id || null
this._name = data && data.name || null
}
get name() {
return this._name
}
set name(v) {
this._name = (v || "").trim() || null
}
}
// In a different module:
import Department from "./Department"
async function searchDepartments(request, response) {
let departments = []
let result = await getDepartmentsFromServer(request.term)
result.data.map((d) => {
departments.push(new Department(d))
})
response(departments)
}
$("#myAutocomplete").autocomplete({
minLength: 1,
delay: 500,
source: searchDepartments,
select: function (e, ui) {
e.preventDefault()
$(this).val(ui.item.name) // ui.item.name is undefined; why?
},
})
.each(function () {
$(this).autocomplete("instance")._renderItem = function (ul, item) {
let itemTemplate = "<div>" + item.name + "</div>"  // item.name is undefined; why?
return $("<li>")
.append(itemTemplate)
.appendTo(ul)
}
})

问题是，自动完成在内部使用不同的项对象；而不是原始的响应(部门(。我在jquery自动完成源中发现了以下代码：

// At line 2527
__response: function( content ) {
if ( content ) {
content = this._normalize( content );
}
...
},
...
// At line 2566
_normalize: function( items ) {
// assume all items have the right format when the first item is complete
if ( items.length && items[ 0 ].label && items[ 0 ].value ) {
return items;
}
return $.map( items, function( item ) {
if ( typeof item === "string" ) {
return {
label: item,
value: item
};
}
return $.extend( {}, item, {
label: item.label || item.value,
value: item.value || item.label
} );
} );
},

看起来，使用$.extend，我的部门对象的getter/setter丢失了。有什么解决问题的建议吗？

附言：当然，在这种情况下，我可以使用物品_名称，但我需要更通用的方法。

Answer 1

我建议先创建Department对象，然后在将结果发送回response()之前使用getter函数。

async function searchDepartments(request, response) {
let departments = []
let result = await getDepartmentsFromServer(request.term)
$.each(result, function(k, d){
var item = new Department(d);
departments.push(item.name);
});
response(departments)
}

然后，这将向response()发送一个字符串数据数组，并且它将得到更好的处理。

希望能有所帮助。