Question

下拉列表正确呈现，但点击下拉结果时，没有任何反应。我知道select2期望结果以某种方式结果，但无法弄清楚结果为什么会赢;当点击下拉列表中的结果时，t会被选中。控制台中没有错误或任何内容..

REST服务的响应是具有Person详细信息的对象数组。

以下是我设置的解释问题的方法：https://jsfiddle.net/qygpb1Lr/

            const $select2 = this.$element.find((`[rel='${this._interestedPartySelect2_id}']`));

            const formatResult = person => {

                if (!person || !person.FULL_NAME) return '';

                return `
                    <strong>${person.LAST_NAME}, ${person.FIRST_NAME}</strong> 
                    <br />
                    <i class='txt-color-cernerPurple'>${person.JOBTITLE || '--'}</i>
                    <br />
                    <span style="color:#525564">${person.DEPARTMENT || '--'}</span>
                    <br />
                    <span class='text-muted'>${person.INTERNET_E_MAIL || '--'}</span>
                `;
            };

            const formatSelection = person => {
                if (!person || !person.LAST_NAME || !person.FIRST_NAME) return '';

                return `${person.LAST_NAME}, ${person.FIRST_NAME}`;
            };

            $select2.select2({
                placeholder        : 'Enter Last Name',
                allowClear         : true,
                minimumInputLength : 3,
                query: query => {

                    $.ajax({
                        url    : `/remedy/people/last_name/${query.term}`,
                        type   : 'GET',
                        headers: { 'content-type': 'application/json' },
                        data   : JSON.stringify({ searchTerm: query.term })
                    })
                    .done(people => {

                        query.callback({ results: people });
                    });
                },
                formatResult,
                formatSelection,
                escapeMarkup    : m => m
            })
            .on('select2-removed', e => {
                // TODO
            })
            .on('select2-selecting', e => {
                console.log(e);  // TODO: Remove this
                if (e.object && e.object.PERSON_ID) {
                    console.log(e.object.PERSON_ID); // TODO
                }
            });

Answer 1

我自己通过将ID字段传递给select2选项来解决这个问题，比如-so：

            $select2.select2({
                placeholder        : 'Enter Last Name',
                allowClear         : true,
                minimumInputLength : 3,
                id: obj      =>  obj.PERSON_ID,
                query: query => {

                    $.ajax({
                        url    : `/remedy/people/last_name/${query.term}`,
                        type   : 'GET',
                        headers: { 'content-type': 'application/json' },
                        data   : JSON.stringify({ searchTerm: query.term })
                    })
                    .done(people => {

                        query.callback({ results: people });
                    });
                },
                formatResult,
                formatSelection,
                escapeMarkup    : m => m
            })
            .on('select2-removed', e => {
                // TODO
            })
            .on('select2-selecting', e => {
                console.log(e);  // TODO: Remove this
                if (e.object && e.object.PERSON_ID) {
                    console.log(e.object.PERSON_ID); // TODO
                }
            });

select2未在控制台中选择没有错误

1 个答案: