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

garrick

garrick

Lotus Team
26.10.2009
1 356
149
BIT
357
Собственно, сабж... не как в обычном только по первой букве, а что-то типа typeahead. Конечно для XPages
 
Что-то у меня не завелось. Вроде всё по инструкции сделал. Броузер в консоль говорит что-то вроде "$(...).select2 not is function". Есть какие-нибудь "тонкости", которые не описаны на сайте по ссылке? Используется JQuery 2.0.3, там вроде не ниже 1.7 надо.
 
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>
 
Всё тоже самое "TypeError: x$(...).select2 is not a function"
Скрипты и стили все подцепляются, но не "стреляет".
 
Ачо те штатный типахид не нравицца?
/такая пропертя есть у поля/
Там красиво, список xml/html даж принимает (в списке выбора), с соотв. рендером
 
garrick сказал(а):
Всё тоже самое "TypeError: x$(...).select2 is not a function"
Скрипты и стили все подцепляются, но не "стреляет".
Нажмите, чтобы раскрыть...
так "за глаза" сложно понять в чём проблема
а у тебя
Ссылка скрыта от гостей
подключена? По моему этот селектор включён в пакет последних Extention Library.
 
И её пробовал вставлять и без неё только с одним $ - никакой разницы. Сервак 9.0.1 FP9
 
garrick сказал(а):
И её пробовал вставлять и без неё только с одним $ - никакой разницы. Сервак 9.0.1 FP9
Нажмите, чтобы раскрыть...
Ссылка скрыта от гостей

или попробуй установить
Ссылка скрыта от гостей
, там есть select2.он работает из-коробки. я с него начинал знакомство с select2.
 
  • Нравится
Реакции: garrick
По описанию похоже, надо поковырять повнимательнее. К сожалению поставить новые плагины на сервер нет возможности, надо выкручиваться с тем, что есть. И вот что интересно...
2018-06-08 09 33 16.png


Сразу скажу от браузера это не зависит, пробовал с разными.
 
garrick сказал(а):
И вот что интересно...
Нажмите, чтобы раскрыть...
Это нормально. Это их глючок. Если попереключаться по их вкладкам, то такая ошибка и у меня бывает.На неё не обращай внимание.
garrick сказал(а):
К сожалению поставить новые плагины на сервер нет возможности, надо выкручиваться с тем, что есть.
Нажмите, чтобы раскрыть...
Так у вас наверное и Extension Library не установлен? Тогда , как советует alexas1, используйте Type Ahead у EditBox.
А вообще если действительно интересует, какойто красивый аналог combobox/listbox, то имеет смысл потратить время разобраться с селект2. Компонент красивый.
 
garrick сказал(а):
Что за штатный? Что за "пропертя"? Можно об этом поподробнее?
Нажмите, чтобы раскрыть...
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 ...)
естественно, всё это кастомайзится как хочешь
 
victorhalf сказал(а):
Так у вас наверное и Extension Library не установлен?
Нажмите, чтобы раскрыть...
В FP9 ExtLib уже зашито.

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

Ну так это же не ComboBox. Пользователи хотят именно ComboBox для выбора наименований организаций. Что бы можно было выбрать если организаций немного или "найти", если список большой. Естественно, если использовать штатный typeahed, то он ищет по первым буквам, а почти все организации называются "ООО "...". Поиск должен выглядеть типа "Вас.." и показывает все названия с этим сочетанием, не "ООО "Вас". SELECT2 работает именно так, как надо, но только не у меня :( Буду пытаться его побороть. Или вот ещё есть Dojo ComboBox, он вроде тоже умеет. Только в Домине какая-то старая версия Dojo, на сайте по ней даже документации уже нет.
 
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К
...ну и красоту чуть доделать)
 
  • Нравится
Реакции: lmike и garrick
1. По наводке @victorhalf Оказалось, что JQuery грузилась два раза. Один раз старый разработчик её к базе сам прикрутил и второй раз в новый FP9 - оно встроено вместе с темой Bootstrap3. Аналогично и CSS Bootstrap. Почистил, но это не помогло.
2. Почему-то без шума и пыли заработала эта штука
Ссылка скрыта от гостей
. Хотя казалось бы какая разница, вызывается таким же образом, да выглядит так же.
 
Для ответа нужно войти/зарегистрироваться
Мы в соцсетях:

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

Верх Низ