VPF::Выпадающий список из текстового поля.

svch

Дата 10.4.2006, 10:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

Всем доброго времени суток !
Человек я тут новый, попытаюсь доступным языком объяснить суть проблемы.

На сайте необходимо нарисовать поле для ввода текста. При введении значения в это поле, снизу выскакивает список подходящих по маске значений.
Вот пример работающего кода:
http://www.tutu.ru/poezda/

Взяв с данного ресурса необходимые файлы и подставив их на свой сайт я обнаружил, что работает все несколько не так, как мне надо. А именно:
1. При выборе значения и попытке его удаления - не удаляется. Т.е. выбрал я, например, населенный пункт (кликнул по нему мышкой в списке - он появился в поле), но если я его стираю и выхожу из поля - он вновь появляется.
2. Почему-то данный код у меня работает только в том случае, есть тег <form ....> стоит прямо перед <input type ...>. Т.е. если я "открою" форму в начале таблицы, затем создам несколько <TR> и <TD> ... и только потом вставлю свое текстовое поле - скрипт не работает.
3. И последнее. Было бы просто идеально, если бы была возможность добавлять дополнительные поля - т.е. сделать две кнопки "Добавить еще одно поле" и "Удалить поле". Как это сделать, я пример нашел:

Код


<script language="javascript" type="text/javascript">
    function ShowOrHideEx(id, show) {
        var item = null;
        if (document.getElementById) {
          item = document.getElementById(id);
        } else if (document.all) {
          item = document.all[id];
        } else if (document.layers){
          item = document.layers[id];
        }
        if (item && item.style) {
          item.style.display = show ? "" : "none";
        }
    }
    function onChecked(value) {
       ShowOrHideEx('_thumb', value == 'make_thumb');
    }
    function AddImages() {
     var tbl = document.getElementById('tblSample');
     var lastRow = tbl.rows.length;

     // if there's no header row in the table, then iteration = lastRow + 1
     var iteration = lastRow+1;
     var row = tbl.insertRow(lastRow);

     var cellRight = row.insertCell(0);
     var el = document.createElement('input');
     el.setAttribute('type', 'file');
     el.setAttribute('name', 'file_' + iteration);
     el.setAttribute('size', '41');
     el.setAttribute('value', iteration);
     cellRight.appendChild(el);

     document.getElementById('images_number').value = iteration;
    }
    function RemoveImages() {
     var tbl = document.getElementById('tblSample');
     var lastRow = tbl.rows.length;
     if (lastRow > 1){
              tbl.deleteRow(lastRow - 1);
               document.getElementById('images_number').value =  document.getElementById('images_number').value - 1;
     }
    }
    </script>

Код


<form action='' method='post' enctype="multipart/form-data" name="form" id="form">
<input type="hidden" name="subaction" value="upload">
<input type="hidden" name="area" value=''>
<input type="hidden" name="action" value=''>
<input type="hidden" name="images_number" id="images_number" value="1">
<table width="100%">
    <tr>
        <td bgcolor="#EFEFEF" height="29" style="padding-left:10px;"><div class="navigation">Загрузка файлов на сервер</div></td>
    </tr>
</table>
<div class="unterline"></div>
<table id="tblSample" class="upload">
 <tr id="row">
  <td>С жесткого диска:<br /><input type="file" size="41" name="file_1"></td>
</tr>
</table>
<div>
<input type=button class=buttons value='<<' title='Удалить последнее поле ' onClick="RemoveImages();return false;">
<input type=button class=buttons value='>>' title='Добавить еще одно поле' onClick="AddImages();return false;">
</div>
</form>

Пример взят с админки этого движка.

Поля добавляются и удаляются. Но как создать поле, чтобы из него мог выпадать список - я не знаю smile

Надеюсь, я не очень запутанно все объяснил. Люди добрые - помогите, кто чем может. Из похожих тем нашел только эту, но она немного не то, что нужно. Да и сам я на сегодняшний день полный делетант в Яве smile

Буду очень признателен.
С уважением, Сергей.

Aliance

Дата 10.4.2006, 13:43 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Видел подобные скрипты на *HTTPRequest, где банные берутся из Базы Данных. Вам нужно из БД?

ЗЫ: Ява и ЯваСкрипт два разных языка!

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

svch

Дата 10.4.2006, 15:01 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

Нет, мне из БД ничего брать не надо.
Значения списка берутся из файла:

Код


var stations = "~Аахен Главный~Абагур-Лесной~Абагуровский~Абадан~Абаевский~Абаза~Яцкая~Яшкино~Яя~им. М.Горького~им. Пьяскорского~им. Т.Шевченко~";
var divCode = '<div id="drop_down_list" style="position:relative; top:1px; left:0px;" class="d">';
    divCode+= '<div style="position:absolute; left:0px; top:0px;">';
    divCode+= '<table width="100%" cellpadding="2" cellspacing="0" style="border:1px solid #555555;" id="oTable"></table>';
    divCode+= '</div></div>';
var oTable;
var oc;
var curItem;
var browser = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ));
var restrict = '!@#$%^&*()_+=|/<>?~№;%:';
var fsize;

function restrictEscapes(str){
    var s = str;
    var test = s.substr(str.length-1,1);
    for(var i=0; i<restrict.length; i++){
        if(test==restrict.charAt(i)||test=="\\") s = restrictEscapes(s.substring(0, s.length-1));
    }
    return s;
}

function onInputHandler(o){
    var temp = o.value;
    o.value = restrictEscapes(temp);
    oTable = document.getElementById('oTable');
    if(oTable) while(oTable.rows.length>0) oTable.deleteRow();
    if(o.value.length<1){
        if(oTable) hideDialog();
        return;
    }
    if(!oTable) showDialog(o);
    if(oTable) findnum(o.value, 10);
}

function findnum(str,num){
    re = new RegExp("\~("+str+")[^~]*","ig");
    var arr;
    var i=0;
        while ((arr = re.exec(stations)) != null && i<num){
            i++;
            var s = arr[0];
            var oTR = oTable.insertRow();
            var oTD = oTR.insertCell();
            oTD.innerHTML = "<table width='100%' cellpadding='0' cellspacing='0'><tr><td>"+s.substring(1,s.length)+"</td><td style='text-align:right;'>...</td></tr></table>";
            oTD.className = "tdListP";
            oTD.setAttribute("stationName", s.substring(1,s.length));
            oTD.setAttribute("eid", i);
            oTD.onmouseover = function(){clearRunStyle(); this.runtimeStyle.backgroundColor="#79A9E4"; this.runtimeStyle.color="#ffffff"; this.runtimeStyle.cursor="hand";curItem=this.getAttribute("stationName");}
            //oTD.onmouseout = function(){this.runtimeStyle.backgroundColor=""; this.runtimeStyle.color="";}
        }
    re = new RegExp("\~("+str+")[^~]*","ig");
    if(!re.test(stations)) hideDialog();
}

function onChangeHandler(o){
    if(!browser) return;
    oTable = document.getElementById('oTable');
    //if(!(oTable = document.getElementById('oTable'))) return;
    if(window.event.keyCode==38||window.event.keyCode==40||window.event.keyCode==13){
        if(oTable){
            moveSelection(window.event.keyCode,o);
            return;
        }
    }
    onInputHandler(o);
}

function getItem(itemi){
    if(oTable){
        for(var i=0; i<oTable.rows.length; i++){
            for(var j=0; j<oTable.rows(i).cells.length; j++){
                if(oTable.rows(i).cells(j).getAttribute("eid")==itemi) return oTable.rows(i).cells(j);
            }
        }
    }
}

function clearRunStyle(){
    if(oTable){
        for(var i=0; i<oTable.rows.length; i++){
            for(var j=0; j<oTable.rows(i).cells.length; j++){
                oTable.rows(i).cells(j).runtimeStyle.backgroundColor="";
                oTable.rows(i).cells(j).runtimeStyle.color="";
            }
        }
    }
}

function moveSelection(k,o){
    if(k==38){
        if(!oTable.getAttribute('selectedItem')){
            oTable.setAttribute('selectedItem',oTable.rows.length+1);
        }else{
            clearRunStyle();
        }
        var c = parseInt(oTable.getAttribute('selectedItem'));
        (c>1)? c-- : c = 1;
        oTable.setAttribute('selectedItem',c);
        getItem(oTable.getAttribute('selectedItem')).runtimeStyle.backgroundColor="#79A9E4";
        getItem(oTable.getAttribute('selectedItem')).runtimeStyle.color="#ffffff";
    }else if(k==40){
        if(!oTable.getAttribute('selectedItem')){
            oTable.setAttribute('selectedItem',0);
        }else{
            clearRunStyle();
        }
        var c = parseInt(oTable.getAttribute('selectedItem'));
        (c<oTable.rows.length)? c++ : c = oTable.rows.length;
        oTable.setAttribute('selectedItem',c);
        getItem(oTable.getAttribute('selectedItem')).runtimeStyle.backgroundColor="#79A9E4";
        getItem(oTable.getAttribute('selectedItem')).runtimeStyle.color="#ffffff";
    }else if(k==13){
        curItem = getItem(oTable.getAttribute('selectedItem')).getAttribute('stationName');
        hideDialog(true);
        if(oc.getAttribute('nextTab')) document.getElementById(oc.getAttribute('nextTab')).focus();
    }
}

function showDialog(o){
    o.parentNode.insertAdjacentHTML("afterEnd", divCode);
    oTable = document.getElementById('oTable');
    if(o.style.width.substr(o.style.width.length-2,2) == "px"){
        document.getElementById('drop_down_list').style.width = parseInt(o.style.width.substring(0,o.style.width.length-2))+6;
    }else{
        document.getElementById('drop_down_list').style.width = 300;
    }
    oc = o;
}

function hideDialog(a){
    //a = automatic - true - if onfocus lost - false if by pressing enter;
    if(!browser) return;
    if(a){
        if(curItem) oc.value = curItem;
    }
    if(document.getElementById('drop_down_list')){
        document.getElementById('drop_down_list').removeNode(true);
    }
}

function swapSubmit(id,ti){
    document.getElementById(id).insertAdjacentHTML("afterEnd", "<input type='button' value='искать' name='"+id+"' onkeypress='submit(this);' onclick='submit(this);' style='width:100px; border-style:outset;' tabIndex='"+ti+"'>");
    document.getElementById(id).removeNode(true);
}

function submit(o){
    if(window.event.keyCode==13){
        o.form.submit();
    }
}

Вот весь скрипт.
С уважением, Сергей.

svch

Дата 12.4.2006, 10:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

Люди-и-и !!!
Никто подобного не делал чтоли ?

12345c

Дата 12.4.2006, 11:17 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Aliance, из Базы Банных?

svch, практика показывает, что такие объёмные коды редко кто принимается разбирать. Если бы Вы выделили проблему в строк 20-30, вероятности решения было бы больше, независимо от того, делал ли кто ранее.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »