代码之家 › 专栏 › 技术社区 › Rookie

在控制台中选择2不选择且无错误

jquery-select2 javascript

Rookie · 技术社区 · 6 年前

下拉列表正确呈现,但单击下拉结果时,不会发生任何事情。我知道select2期望结果会以某种方式出现,但无法理解为什么结果会赢;单击下拉列表中的结果时,无法选中。控制台中没有错误或任何内容。。

REST服务的响应是一个包含个人详细信息的对象数组。

下面是我设置的一个JSFIDLE来说明这个问题: 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
                }
            });

1 回复 | 直到 6 年前

Rookie 6 年前

我通过向select2选项传递一个ID字段来解决这个问题,如下所示:

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