автозаполнение jquery-ui не использует оригинальные элементы - PullRequest
Новая
       8

автозаполнение jquery-ui не использует оригинальные элементы

0 голосов
/ 05 декабря 2018

У меня есть следующее: 

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 средства получения / установки моего объекта отдела теряются.Любые предложения по решению проблемы?

PS: Конечно, в этом случае я могу использовать item._name, но мне нужен более общий подход.

1 Ответ

0 голосов
/ 05 декабря 2018

Я бы посоветовал сначала попытаться создать объект Department, а затем использовать функцию получения перед отправкой результатов обратно в response(). 

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)
}

Затем будет отправлен массив данных Stringresponse() и это будет лучше обработано.

Надеюсь, это поможет.

...