Совмещение input+select "а-ля combobox"

Тема в разделе "Другие языки", создана пользователем SolutionFix, 12 ноя 2012.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. SolutionFix

    SolutionFix 17 лет програмлю ;)

    Регистр.:
    20 ноя 2006
    Сообщения:
    272
    Симпатии:
    318
    В общем такая задача, помогите вдруг кто знает.
    Нужно совместить input+select, чтобы когда пользователь выбирал option в select-e, оно подставлялось в input, а визуально это выглядело как один элемент.
    Необходимо реализовать без использования JS для изменения ширины/видимости элементов, только для заполнения input из select.
    Стандартные решения - например вот такое, я давно знаю:

    HTML:
     <style type="text/css">
                .select-and-input {
                    position: relative;
                    height: 25px;
                    width: 100px;
                }
                .select-and-input select {
                    position: absolute;
                    z-index: 0;
                    top: 0;
                    left: 0;
                    height: 23px;
                    width: 100px;
                }
     
                .select-and-input input {
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    left: 0;
                    height: 18px;
                    padding:0;
                    width: 78px;
                }
    </style>
     
                <div class="select-and-input">
                    <select name="selectName" onchange="parentNode.getElementsByTagName('input')[0].value=value">
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                    </select>
                    <input type="text" name="inputText"/>
                </div>
    
    Но счас возникла задача - как сделать "плавающую" ширину. То есть в приведенном выше коде нужно чтобы у элементов было width: 100%.
    Очень неохота дописывать костыли на js/jquery по изменению ширины, так как при изменении ширины окна браузера, динамическом изменении ширины других элементов это все надо пересчитывать, и абсолютно все варианты учесть довольно сложно, да и костыль есть костыль.
    Помогите, если кто знает css получше меня, и знает как ему блин сказать "налложить два элемента друг на друга, растянув первый на 100% по ширине, а второй на 100% - N pixel".
    Спасибо.
     
  2. CAPAXA

    CAPAXA

    Регистр.:
    7 июн 2007
    Сообщения:
    903
    Симпатии:
    540
    А чем не устраивает на JQuery autocomplete?
     
  3. SolutionFix

    SolutionFix 17 лет програмлю ;)

    Регистр.:
    20 ноя 2006
    Сообщения:
    272
    Симпатии:
    318
    - тем что надо подключать jquery
    - тем что сам select у меня не такой простой как в приведенном примере, там есть группы, навешано обработчиков и так далее
     
  4. SolutionFix

    SolutionFix 17 лет програмлю ;)

    Регистр.:
    20 ноя 2006
    Сообщения:
    272
    Симпатии:
    318
    Хочешь сделать что-то хорошо, сделай это сам.
    Короче вдруг кому потом пригодится

    HTML:
    
    <div style="width: 100%;">
            <select style="width: 100%;" onchange="parentNode.getElementsByTagName('input')[0].value=value">
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
            </select>
            <div style="margin-right: 22px; margin-top: -22px">
                <input style="width: 100%; height: 14px;">
            </div>
    </div>
    
    PS Закройте плз. тему у кого права есть
     
Статус темы:
Закрыта.