• Познакомьтесь с пентестом веб-приложений на практике в нашем новом бесплатном курсе

    «Анализ защищенности веб-приложений»

    🔥 Записаться бесплатно!

  • CTF с учебными материалами Codeby Games

    Обучение кибербезопасности в игровой форме. Более 200 заданий по Active Directory, OSINT, PWN, Веб, Стеганографии, Реверс-инжинирингу, Форензике и Криптографии. Школа CTF с бесплатными курсами по всем категориям.

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

garrick

Lotus Team
26.10.2009
1 349
151
BIT
165
Собственно, сабж... не как в обычном только по первой букве, а что-то типа typeahead. Конечно для XPages
 

garrick

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

victorhalf

Green Team
29.05.2007
79
3
BIT
0
Что-то у меня не завелось. Вроде всё по инструкции сделал. Броузер в консоль говорит что-то вроде "$(...).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
1 349
151
BIT
165
Всё тоже самое "TypeError: x$(...).select2 is not a function"
Скрипты и стили все подцепляются, но не "стреляет".
 

alexas1

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

victorhalf

Green Team
29.05.2007
79
3
BIT
0
Всё тоже самое "TypeError: x$(...).select2 is not a function"
Скрипты и стили все подцепляются, но не "стреляет".
так "за глаза" сложно понять в чём проблема
а у тебя подключена? По моему этот селектор включён в пакет последних Extention Library.
 

garrick

Lotus Team
26.10.2009
1 349
151
BIT
165
И её пробовал вставлять и без неё только с одним $ - никакой разницы. Сервак 9.0.1 FP9
 

victorhalf

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

или попробуй установить , там есть select2.он работает из-коробки. я с него начинал знакомство с select2.
 
  • Нравится
Реакции: garrick

garrick

Lotus Team
26.10.2009
1 349
151
BIT
165
По описанию похоже, надо поковырять повнимательнее. К сожалению поставить новые плагины на сервер нет возможности, надо выкручиваться с тем, что есть. И вот что интересно...
2018-06-08 09 33 16.png


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

victorhalf

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

alexas1

Green Team
10.04.2014
1 202
225
BIT
34
Что за штатный? Что за "пропертя"? Можно об этом поподробнее?
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
1 349
151
BIT
165
Так у вас наверное и Extension Library не установлен?
В FP9 ExtLib уже зашито.

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

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

alexas1

Green Team
10.04.2014
1 202
225
BIT
34
В 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К
...ну и красоту чуть доделать)
 
  • Нравится
Реакции: lmike и garrick

garrick

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

Обучение наступательной кибербезопасности в игровой форме. Начать игру!