Посоветуйте comboBox с поиском

garrick · 06.06.2018

Собственно, сабж... не как в обычном только по первой букве, а что-то типа typeahead. Конечно для XPages

victorhalf · 06.06.2018

garrick сказал(а):
Собственно, сабж... не как в обычном только по первой букве, а что-то типа typeahead. Конечно для XPages

Мне, например, select2 приглянулся.

garrick · 06.06.2018

Что-то у меня не завелось. Вроде всё по инструкции сделал. Броузер в консоль говорит что-то вроде "$(...).select2 not is function". Есть какие-нибудь "тонкости", которые не описаны на сайте по ссылке? Используется JQuery 2.0.3, там вроде не ниже 1.7 надо.

victorhalf · 07.06.2018

garrick сказал(а):
Что-то у меня не завелось. Вроде всё по инструкции сделал. Броузер в консоль говорит что-то вроде "$(...).select2 not is function". Есть какие-нибудь "тонкости", которые не описаны на сайте по ссылке? Используется JQuery 2.0.3, там вроде не ниже 1.7 надо.

Тонкостей настройки уже, конечно, не вспомню, допиливалось это не один месяц.

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">

    <xp:this.resources>
        <xp:script
            src="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet
            href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.css">
        </xp:styleSheet>
        <xp:styleSheet
            href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css">
        </xp:styleSheet>

    </xp:this.resources>
    
            <xp:div xp:key="facetMiddle" styleClass="container">                
                <legend>Select 2</legend>
                <xp:div styleClass="well">
                    <div class="row">
                        <div class="col-sm-6">
                            With a combobox (change event, partial    refresh):
                            <xp:comboBox id="comboBox1"
                                value="#{viewScope.country}">
                                <xp:selectItem itemLabel=""
                                    itemValue="">
                                </xp:selectItem>
                                <xp:selectItem
                                    itemLabel="The Netherlands">
                                </xp:selectItem>
                                <xp:selectItem itemLabel="Belgium"></xp:selectItem>
                                <xp:selectItem itemLabel="Germany"></xp:selectItem>
                            </xp:comboBox>
                            <xp:scriptBlock id="scriptBlock1">
                                <xp:this.value><![CDATA[
x$("#{id:comboBox1}").select2({
    placeholder : 'Pick a country',
    minimumResultsForSearch : 1
})
.on('change', function(e) {
    console.log('option changed to: ' + e.val);
    XSP.partialRefreshPost("#{id:refreshMe}");
});
]]></xp:this.value>
                            </xp:scriptBlock>
                        </div>
                        <xp:div id="refreshMe" styleClass="col-sm-6">
                            You picked:
                            <br />
                            <xp:text value="#{viewScope.country}" />
                        </xp:div>
                    </div>
                </xp:div>

                <xp:div styleClass="well">
                    <xp:scriptBlock id="scriptBlock2">
                        <xp:this.value><![CDATA[  
$(document).ready(function() {
    x$( "#{id:listBox1}" ).select2({
        placeholder: "Select a country",
        allowClear: true,          
        maximumSelectionLength: 2
    });
});
]]></xp:this.value>
                    </xp:scriptBlock>
                    With a listbox (multi-select):
                    <xp:br></xp:br>
                    <xp:listBox id="listBox1" multiple="true">
                        <xp:selectItem itemLabel="The Netherlands"></xp:selectItem>
                        <xp:selectItem itemLabel="Belgium"></xp:selectItem>
                        <xp:selectItem itemLabel="Germany"></xp:selectItem>
                        <xp:selectItem itemLabel="Ukraine"></xp:selectItem>
                        <xp:selectItem itemLabel="Russian"></xp:selectItem>
                    </xp:listBox>
                </xp:div>   
            
            <xp:div styleClass="well">                    
                    <xp:br></xp:br>
                    <xp:inputHidden id="inputHidden2"></xp:inputHidden>
                    <xp:scriptBlock id="scriptBlock4">
                        <xp:this.value><![CDATA[
    x$("#{id:inputHidden2}").select2( {
        minimumInputLength: 1,
        width : 300,
        query: function (query) {
            var data = {results: []}, i, j, s;
            for (i = 1; i < 8; i++) {
                s = "";
                for (j = 0; j < i; j++) {s = s + query.term;}
                data.results.push({id: query.term + i, text: s});
            }
            query.callback(data);
        }
    });
]]></xp:this.value>
                    </xp:scriptBlock>
                    
                    </xp:div>
            </xp:div>
</xp:view>

garrick · 07.06.2018

Всё тоже самое "TypeError: x$(...).select2 is not a function"
Скрипты и стили все подцепляются, но не "стреляет".

alexas1 · 07.06.2018

Ачо те штатный типахид не нравицца?
/такая пропертя есть у поля/
Там красиво, список xml/html даж принимает (в списке выбора), с соотв. рендером

victorhalf · 07.06.2018

garrick сказал(а):
Всё тоже самое "TypeError: x$(...).select2 is not a function"
Скрипты и стили все подцепляются, но не "стреляет".

так "за глаза" сложно понять в чём проблема
а у тебя эта фигня подключена? По моему этот селектор включён в пакет последних Extention Library.

garrick · 07.06.2018

И её пробовал вставлять и без неё только с одним $ - никакой разницы. Сервак 9.0.1 FP9

victorhalf · 07.06.2018

garrick сказал(а):
И её пробовал вставлять и без неё только с одним $ - никакой разницы. Сервак 9.0.1 FP9

не твой ли случай?
или попробуй установить bootstrap4xpages, там есть select2.он работает из-коробки. я с него начинал знакомство с select2.

garrick · 08.06.2018

По описанию похоже, надо поковырять повнимательнее. К сожалению поставить новые плагины на сервер нет возможности, надо выкручиваться с тем, что есть. И вот что интересно...

Сразу скажу от браузера это не зависит, пробовал с разными.

garrick · 08.06.2018

alexas1 сказал(а):
Ачо те штатный типахид не нравицца?
/такая пропертя есть у поля/
Там красиво, список xml/html даж принимает (в списке выбора), с соотв. рендером

Что за штатный? Что за "пропертя"? Можно об этом поподробнее?

victorhalf · 08.06.2018

garrick сказал(а):
И вот что интересно...

Это нормально. Это их глючок. Если попереключаться по их вкладкам, то такая ошибка и у меня бывает.На неё не обращай внимание.

garrick сказал(а):
К сожалению поставить новые плагины на сервер нет возможности, надо выкручиваться с тем, что есть.

Так у вас наверное и Extension Library не установлен? Тогда , как советует alexas1, используйте Type Ahead у EditBox.
А вообще если действительно интересует, какойто красивый аналог combobox/listbox, то имеет смысл потратить время разобраться с селект2. Компонент красивый.

alexas1 · 08.06.2018

garrick сказал(а):
Что за штатный? Что за "пропертя"? Можно об этом поподробнее?

<xp:inputText id="partnerName" styleClass="feld"
style="width:263.0px;padding-left:3.0px;margin-top:-3.0px">
<xp:typeAhead mode="partial" minChars="1"
ignoreCase="true" rendered="true" var="key" valueMarkup="false"
id="typeAhead1">
.....................

в Suggestion -> список (в явном виде, получить лукапом, вызвать RPC, REST ...)
естественно, всё это кастомайзится как хочешь

garrick · 08.06.2018

victorhalf сказал(а):
Так у вас наверное и Extension Library не установлен?

В FP9 ExtLib уже зашито.

alexas1 сказал(а):
в Suggestion -> список (в явном виде, получить лукапом, вызвать RPC, REST ...)
естественно, всё это кастомайзится как хочешь

Ну так это же не ComboBox. Пользователи хотят именно ComboBox для выбора наименований организаций. Что бы можно было выбрать если организаций немного или "найти", если список большой. Естественно, если использовать штатный typeahed, то он ищет по первым буквам, а почти все организации называются "ООО "...". Поиск должен выглядеть типа "Вас.." и показывает все названия с этим сочетанием, не "ООО "Вас". SELECT2 работает именно так, как надо, но только не у меня

Буду пытаться его побороть. Или вот ещё есть Dojo ComboBox, он вроде тоже умеет. Только в Домине какая-то старая версия Dojo, на сайте по ней даже документации уже нет.

alexas1 · 08.06.2018

garrick сказал(а):
В FP9 ExtLib уже зашито.

Ну так это же не ComboBox. Пользователи хотят именно ComboBox для выбора наименований организаций. Что бы можно было выбрать если организаций немного или "найти", если список большой. Естественно, если использовать штатный typeahed, то он ищет по первым буквам, а почти все организации называются "ООО "...". Поиск должен выглядеть типа "Вас.." и показывает все названия с этим сочетанием, не "ООО "Вас". SELECT2 работает именно так, как надо, но только не у меня Буду пытаться его побороть. Или вот ещё есть Dojo ComboBox, он вроде тоже умеет. Только в Домине какая-то старая версия Dojo, на сайте по ней даже документации уже нет.

всё таки штатными средствами (нечёткий поиск в комбо):

<xe:djFilteringSelect id="djFilteringSelect"
queryExpr="#{javascript:return '*\$\{0\}*';}" autoComplete="false">

<xp:selectItem itemLabel="abc dfg"></xp:selectItem>
<xp:selectItem itemLabel="bcd hjkk"></xp:selectItem>
<xp:selectItem itemLabel="cde 123"></xp:selectItem>
<xp:selectItem itemLabel="efg 678"></xp:selectItem>
<xp:selectItem itemLabel="fgh 12789"></xp:selectItem>
<xp:selectItem itemLabel="ghi hjweoriu"></xp:selectItem>
<xp:selectItem itemLabel="hij"></xp:selectItem>

</xe:djFilteringSelect>
<xp:br></xp:br>
<xp:br></xp:br>
<xe:djFilteringSelect id="djFilteringSelect1"
queryExpr="#{javascript:return '*\$\{0\}*';}" autoComplete="false">

<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbColumn("", "myView", 1)

}]]></xp:this.value>
</xp:selectItems>
</xe:djFilteringSelect>

ток не забыть, что список "selectItem" - 32К
...ну и красоту чуть доделать)

alexas1 · 08.06.2018

garrick сказал(а):
И вот что интересно...

demo

garrick · 09.06.2018

1. По наводке @victorhalf Оказалось, что JQuery грузилась два раза. Один раз старый разработчик её к базе сам прикрутил и второй раз в новый FP9 - оно встроено вместе с темой Bootstrap3. Аналогично и CSS Bootstrap. Почистил, но это не помогло.
2. Почему-то без шума и пыли заработала эта штука Chosen . Хотя казалось бы какая разница, вызывается таким же образом, да выглядит так же.

Поиск

Поиск

Посоветуйте comboBox с поиском

Вложения

Похожие темы