• Codeby web-security - Курс "Тестирование Веб-Приложений на проникновение с нуля" от команды codeby. Общая теория, подготовка рабочего окружения, пассивный фаззинг и фингерпринт, Активный фаззинг, Уязвимости, Пост-эксплуатация, Инструментальные средства, Social Engeneering и многое другое. Подробнее ...

  • Мобильный клиент нашего форума для Android гаджетов доступен в Google Play Market по этой ссылке. Клиент можно скачать с нашего форума по этой ссылке. Последняя версия МК в нашем телеграм канале вот здесь. Мобильный клиент для IOS находится в itunes по этой ссылке

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

garrick

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

victorhalf

Well-known member
29.05.2007
79
2
#2
Последнее редактирование:

garrick

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

victorhalf

Well-known member
29.05.2007
79
2
#4
Что-то у меня не завелось. Вроде всё по инструкции сделал. Броузер в консоль говорит что-то вроде "$(...).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

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

alexas1

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

victorhalf

Well-known member
29.05.2007
79
2
#7
Всё тоже самое "TypeError: x$(...).select2 is not a function"
Скрипты и стили все подцепляются, но не "стреляет".
так "за глаза" сложно понять в чём проблема
а у тебя
Для просмотра контента необходимо: Войти или зарегистрироваться
подключена? По моему этот селектор включён в пакет последних Extention Library.
 

garrick

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

victorhalf

Well-known member
29.05.2007
79
2
#9
И её пробовал вставлять и без неё только с одним $ - никакой разницы. Сервак 9.0.1 FP9
не твой ли случай?
или попробуй установить
Для просмотра контента необходимо: Войти или зарегистрироваться
, там есть select2.он работает из-коробки. я с него начинал знакомство с select2.
 
Симпатии: Понравилось garrick

garrick

Lotus team
26.10.2009
911
62
#10
По описанию похоже, надо поковырять повнимательнее. К сожалению поставить новые плагины на сервер нет возможности, надо выкручиваться с тем, что есть. И вот что интересно...
2018-06-08 09 33 16.png

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

garrick

Lotus team
26.10.2009
911
62
#11
Ачо те штатный типахид не нравицца?
/такая пропертя есть у поля/
Там красиво, список xml/html даж принимает (в списке выбора), с соотв. рендером
Что за штатный? Что за "пропертя"? Можно об этом поподробнее?
 

victorhalf

Well-known member
29.05.2007
79
2
#12
Это нормально. Это их глючок. Если попереключаться по их вкладкам, то такая ошибка и у меня бывает.На неё не обращай внимание.
К сожалению поставить новые плагины на сервер нет возможности, надо выкручиваться с тем, что есть.
Так у вас наверное и Extension Library не установлен? Тогда , как советует alexas1, используйте Type Ahead у EditBox.
А вообще если действительно интересует, какойто красивый аналог combobox/listbox, то имеет смысл потратить время разобраться с селект2. Компонент красивый.
 

alexas1

Lotus team
10.04.2014
760
154
#13
Что за штатный? Что за "пропертя"? Можно об этом поподробнее?
ta.png
<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

Lotus team
26.10.2009
911
62
#14
Так у вас наверное и Extension Library не установлен?
В FP9 ExtLib уже зашито.

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

alexas1

Lotus team
10.04.2014
760
154
#15
В 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К
...ну и красоту чуть доделать)
 
Симпатии: Понравилось garrick

garrick

Lotus team
26.10.2009
911
62
#17
1. По наводке @victorhalf Оказалось, что JQuery грузилась два раза. Один раз старый разработчик её к базе сам прикрутил и второй раз в новый FP9 - оно встроено вместе с темой Bootstrap3. Аналогично и CSS Bootstrap. Почистил, но это не помогло.
2. Почему-то без шума и пыли заработала эта штука
Для просмотра контента необходимо: Войти или зарегистрироваться
. Хотя казалось бы какая разница, вызывается таким же образом, да выглядит так же.
 
Вверх Снизу