VPF::Выпадающий список - Форум программистов

Гость_Андрей

Дата 30.9.2004, 12:18 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Надо как то организовать подстановку значений в поле, например есть поле ввода текста и оноже выпадающий список, по умолчанию значения этого списка такие: яблоко, яблоня, яша, артем.
Когда пользователь не ввел никакого текста выпадающий список состоит таким, как поумолчанию.
Пользователь вводит букву я, и выпадающий список становится из элементов яблоко, яблоня, яша, теперь пользователь пишит дальше яб, и теперь список у нас из таких элементов яблоко, яблоня, теперь пользователь может писать слово до конца, или просто выбрать из списка, он решил писать до конца, пишит яблок, и список состоит из одного элемента яблоко. Как мне это организовать!

GoodBoy

Дата 30.9.2004, 12:22 (ссылка)

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

Загрузка ...

Главный джедай

Профиль
Группа: Модератор
Сообщений: 3886
Регистрация: 8.1.2003
Где: КМВ

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

Цитата

есть поле ввода текста и оно же выпадающий список

А ты уверен что в JS такое вообще существует??? Я о таком и не слышал!!! Вот в Дельфи/Билдере - бывает...

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

Чем дальше в лес, тем толще партизаны...

Цитата(igorold @ 1.5.2016, 17:40

)

Индейцы не обратили внимания на поток беженцев из Европы… Теперь они живут в резервациях.

Forza

Дата 30.9.2004, 12:28 (ссылка)

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

Загрузка ...

Шустрый

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

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

Можно сделать в виде двух полей - текстового и списка. И на текстовое повесить onKeyup.

Гость_Андрей

Дата 30.9.2004, 13:18 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Цитата

Можно сделать в виде двух полей - текстового и списка. И на текстовое повесить onKeyup.

А пример можно, ты млю идею понял, помоги!!!

Gold Dragon

Дата 30.9.2004, 13:24 (ссылка)

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

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

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

в <input type="text"> вводишь текст, при onKeyup вызываешь функцию, где проверяешь в

<select name="">
<option value="1" SELECTED></option>
<option value="2">яблоко</option>
<option value="3">яблоня</option>
<option value="4">яша</option>
<option value="5">артем</option>
</select>

опции на совпадение, если не совпадает, то эту конкретную опцию скрываешь.

Что-то примерно так

Это сообщение отредактировал(а) Red Dragon - 30.9.2004, 13:25

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

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

Forza

Дата 30.9.2004, 14:47 (ссылка)

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

Загрузка ...

Шустрый

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

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

Red Dragon, а как можно скрыть опцию у селекта? Поискав, в МСДНе такого не нашёл.
Есть только remove, но это немного не то.

GoodBoy

Дата 30.9.2004, 14:51 (ссылка)

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

Загрузка ...

Главный джедай

Профиль
Группа: Модератор
Сообщений: 3886
Регистрация: 8.1.2003
Где: КМВ

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

Я думаю только пересоздав селект заново, оставив нужные элементы!

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

Чем дальше в лес, тем толще партизаны...

Цитата(igorold @ 1.5.2016, 17:40

)

Индейцы не обратили внимания на поток беженцев из Европы… Теперь они живут в резервациях.

Gold Dragon

Дата 30.9.2004, 15:07 (ссылка)

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

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

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

GoodBoy
Да, скорее всего. Что-то порылся, хотя у <option> есть свойство style, но display='none' применимо только к <select>

Лучше будет задавать енто всё динамически, а содержимое хранить в массиме. Ща чё-нить попробую сочинить

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

Гость_Андрей

Дата 30.9.2004, 17:00 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Ф в java не шарю, а для пхп скрипта срочно нужну, плиз подробный пример можно!

Alx

Дата 30.9.2004, 17:30 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

document.selectid.options.remove(*)

* - номер элемента в выпадающем списке. (начиная с 0, ессно)

а не проще сделать div? я пожалуй такое сделаю!

ряз Red Dragon с select'ом делает уже...

Это сообщение отредактировал(а) ALEXANDRO - 1.10.2004, 08:39

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

Alx

Дата 30.9.2004, 21:52 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Код


<html>
<head>
<script>
function checkFunc()
{for (var i=0; i<=words.cells.length-1; i++)
{if ((inp.value != "")  && (inp.value != " "))
{words.cells[i].style.display='none';
}
}
for (var i=0; i<=words.cells.length-1; i++)
{if ((words.cells[i].innerText.indexOf(inp.value) == "0"))
{words.cells[i].style.display='block';
}
}
setTimeout("checkFunc()",1)
}
function sel(obj)
{obj.bgColor="#99ccff";
obj.style.cursor='hand';
}
function blu(obj)
{obj.bgColor="#6699cc";
}
</script>
<style>
td {font-family:Verdana;font-size:10pt;color:white;}
</style>
</head>
<body onload="checkFunc()">
<input type="text" size="20" id="inp">
<br>
<div style="position:absolute;overflow:auto;height:65;width:143;background:#6699cc;" align="center">
<table width="90%" id="words" cellspacing="0" cellpadding="0">
<tr onmouseover="sel(this)" onmouseout="blu(this)">
<td onclick="inp.value=this.innerText">
<div>яблоко</div>
</td>
</tr>
<tr onmouseover="sel(this)" onmouseout="blu(this)" onclick="inp.value=this.innerText">
<td>
<div>яблоня</div>
</td>
</tr>
<tr onmouseover="sel(this)" onmouseout="blu(this)" onclick="inp.value=this.innerText">
<td>
<div id="3">яша</div>
</td>
</tr>
<tr onmouseover="sel(this)" onmouseout="blu(this)" onclick="inp.value=this.innerText">
<td>
<div>андрей</div>
</td>
</tr>
<tr onmouseover="sel(this)" onmouseout="blu(this)" onclick="inp.value=this.innerText">
<td>
<div>виталик</div>
</td>
</tr>
<tr onmouseover="sel(this)" onmouseout="blu(this)" onclick="inp.value=this.innerText">
<td>
<div>артём</div>
</td>
</tr>
<tr onmouseover="sel(this)" onmouseout="blu(this)" onclick="inp.value=this.innerText">
<td>
<div>гриша</div>
</td>
</tr>

</div>
</body>
</html>

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

Гость_Андрей

Дата 1.10.2004, 09:40 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

ALEXANDRO спасибо тебе огромное, и всем кто мучился ради меня, парни, вы меня выручили!!

Gold Dragon

Дата 1.10.2004, 09:56 (ссылка)

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

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

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

Отличный код..

Только не могу понять, почему если использовать не таймер, а, например,
<input type="text" size="20" id="inp" onkeypress="checkFunc()">
функция вызывается с запозданием в один клик

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

Alx

Дата 1.10.2004, 12:54 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Цитата

Только не могу понять, почему если использовать не таймер, а, например,
<input type="text" size="20" id="inp" onkeypress="checkFunc()">
функция вызывается с запозданием в один клик

да, я тоже с этим намучился! пришлось таймер сделать. всё из-за того, что текст вводится после выполнения функции, а надо перед!...

PS .... 2 Sardar...

интересно... а я могу за это потребовать респект? ...

нет, просто интересно...

))))))))

Это сообщение отредактировал(а) ALEXANDRO - 1.10.2004, 12:56

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

GoodBoy

Дата 1.10.2004, 12:58 (ссылка)

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

Загрузка ...

Главный джедай

Профиль
Группа: Модератор
Сообщений: 3886
Регистрация: 8.1.2003
Где: КМВ

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

Цитата(ALEXANDRO @ 1.10.2004, 13:54)

а я могу за это потребовать респект

Потребовать - явно не можешь!!!

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

Чем дальше в лес, тем толще партизаны...

Цитата(igorold @ 1.5.2016, 17:40

)

Индейцы не обратили внимания на поток беженцев из Европы… Теперь они живут в резервациях.

Alx

Дата 1.10.2004, 13:05 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Цитата

Потребовать - явно не можешь!!!

GoodBoy , да ты чё, я ж пошутил!!!!! .......

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

GoodBoy

Дата 1.10.2004, 13:16 (ссылка)

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

Загрузка ...

Главный джедай

Профиль
Группа: Модератор
Сообщений: 3886
Регистрация: 8.1.2003
Где: КМВ

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

ALEXANDRO
А ты что мою фразу всерьёз воспринял???

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

Чем дальше в лес, тем толще партизаны...

Цитата(igorold @ 1.5.2016, 17:40

)

Индейцы не обратили внимания на поток беженцев из Европы… Теперь они живут в резервациях.

Alx

Дата 1.10.2004, 13:19 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Цитата

А ты что мою фразу всерьёз воспринял???

уфф... да! ....

...

так фсё, не флудим, а то накажут. меня-то точно.

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

Гость_Андрей

Дата 1.10.2004, 16:43 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

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

GoodBoy

Дата 1.10.2004, 16:54 (ссылка)

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

Загрузка ...

Главный джедай

Профиль
Группа: Модератор
Сообщений: 3886
Регистрация: 8.1.2003
Где: КМВ

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

Гость_Андрей Ещё бы!!!!!!!!!!!! :-)))))))))))

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

Чем дальше в лес, тем толще партизаны...

Цитата(igorold @ 1.5.2016, 17:40

)

Индейцы не обратили внимания на поток беженцев из Европы… Теперь они живут в резервациях.

Гость_Андрей

Дата 1.10.2004, 17:16 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Цитата(GoodBoy @ 1.10.2004, 16:54)

Гость_Андрей Ещё бы!!!!!!!!!!!! :-)))))))))))

А нельзя ускорить, используя не таблицы, а выпад. список???

Alx

Дата 1.10.2004, 17:54 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

тормозит не из-за этого, а из-за того, что он не успевает обработать все данные за одну секунду. на досуге придумаю (по крайней мере, постараюсь) решение.
Добавлено @ 17:55
то есть, за одну тысячную секунды.... гы.

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

Гость_Андрей

Дата 1.10.2004, 18:24 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Цитата(ALEXANDRO @ 1.10.2004, 17:54)

Плиззз, жду!

Alx

Дата 1.10.2004, 19:49 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

мне вот интересно... почему

не работает

Код

function checkFunc()
{for (var i=0; i<=words.cells.length-1; i++)
{if ((inp.value != "") && (inp.value != " "))
{words.cells[i].style.display='none';
}
}
for (var i=0; i<=words.cells.length-1; i++)
{if ((words.cells[i].innerText.indexOf(inp.value) == "0"))
{words.cells[i].style.display='block';
}
}
checkFunc();
}

памяти не хватает... а так - самое оно!

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

Sardar

Дата 2.10.2004, 02:01 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

ALEXANDRO я тебе плюс поставил за "грамотный код"... ты знаешь, за такой код из комсомола исключать надо!!!

Честно, прежде чем писать, думайте

Мой вариант, убил 2 часа:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<style type="text/css">
td.list_item {font-family:Verdana;font-size:10pt;color:white; background-color:#6699cc;}
td.list_item_sel {font-family:Verdana;font-size:10pt;color:white; background-color:#99ccff}
div.list_select {position:absolute;overflow:auto;height:65; background:#6699cc;}
</style>

<script language="Javascript" type="text/javascript">
<!--
createList.sel_list_info=[];
function createList(obj, arr) {
 obj.onkeypress=list_input_keypress;
 obj.onfocus=function() {
    var idt=this.getAttribute("list_select_name");
    if(!createList.sel_list_info[idt]) return;
    createList.sel_list_info[idt][1].style.visibility="visible";
 };
 obj.onblur=function() {
    var idt=this.getAttribute("list_select_name");
    if(!createList.sel_list_info[idt]) return;
    window.setTimeout("createList.sel_list_info["+idt+"][1].style.visibility=\"hidden\"", 100);
 };
 obj.setAttribute("list_select_name", createList.sel_list_info.length);
 var x=0, y=obj.offsetHeight;
 var wd=obj.offsetWidth;
 var prt=obj;
 while(prt) {
  x+=prt.offsetLeft;
  y+=prt.offsetTop;
  prt=prt.offsetParent;
 }
 var platf=document.createElement("DIV");
 platf.className="list_select";
 platf.style.width=wd;
 platf.style.top=y;
 platf.style.left=x;
 platf.setAttribute("align", "center");

 var table=document.createElement("TABLE");
 table.setAttribute("width", "90%");
 table.setAttribute("cellspacing", 0);
 table.setAttribute("cellpadding", 0);
 
 var row, cell;
  for(var i=0; i<arr.length; i++) {
    row=table.insertRow(table.rows.length);  
	cell=row.insertCell(row.cells.length);
	cell.appendChild(document.createTextNode(arr[i]));
    cell.onmouseover=row_mouse_over;
	cell.onmouseout=row_mouse_out;
	cell.onclick=row_click;
	cell.className="list_item";
	cell.setAttribute("list_select_name", createList.sel_list_info.length);
  }
 createList.sel_list_info.push([arr,platf,table,obj]);
 platf.appendChild(table);
 document.body.appendChild(platf);
 platf.style.visibility="hidden";
}

function row_mouse_out() {
 this.className="list_item";
}
function row_mouse_over() {
 this.className="list_item_sel";
}
function row_click() {
 var idt=this.getAttribute("list_select_name");
 if(!createList.sel_list_info[idt]) return;
 createList.sel_list_info[idt][3].value=this.firstChild.nodeValue;
}
function list_input_keypress(ev) {
 var kcd=(window.event? window.event.keyCode: ev.charCode);
 var val=this.value+(kcd>=32? String.fromCharCode(kcd): "");
 var idt=this.getAttribute("list_select_name");
 if(!createList.sel_list_info[idt]) return;
 var ind=bin_seek(val, createList.sel_list_info[idt][0], 0, createList.sel_list_info[idt][0].length-1);
 if(ind<0) return;
 createList.sel_list_info[idt][1].scrollTop=(createList.sel_list_info[idt][2].rows[0].offsetHeight+(document.all? 2: 0))*ind;
}

function bin_seek(word, arr, ind1, ind2) {
 var mid;
 while(ind1<ind2) {
  if((ind2-ind1+1)<7) return simple_seek(word, arr, ind1);
  mid=(ind2+ind1)>>1;
  if(arr[mid]<word) { ind1=mid+1; continue; }
  else if(arr[mid]>word) { ind2=mid-1; continue; }
  else return mid;
 }
 return -1;
}
function simple_seek(word, arr, offs) {
 for(var i=offs; i<arr.length; i++) {
  if(arr[i]<word) continue;
  if(arr[i].length>=word.length&&arr[i].substr(0,word.length)==word) return i;
 }
 return -1;
}
//-->
</script>
</head>

<body>
<input type="text" id="list">
<script language="Javascript" type="text/javascript">
<!--
opt=["test", "privet", "vsem", "java", "script", "jad", "javable", "sdfs",  "saerdar", "vingrad", "vingrad", "vinsord", "verda"].sort();
createList(document.getElementById("list"), opt);
//-->
</script>
</body>
</html>

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

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Alx

Дата 2.10.2004, 08:43 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Sardar
он теперь во всех браузерах работает?

у меня, кстати, сам отбор не работает, т.е. я ввожу, что хочу, а в диве ничего не изменяется!
и ещё при прокрутке дива, он исчезает, mouseover'а нету!

а, я понял - ты просто делаешь прокрутку в то место! Оригинально!

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

Sardar

Дата 2.10.2004, 14:16 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

Цитата(ALEXANDRO @ 2.10.2004, 07:43)

он теперь во всех браузерах работает?

Да, иначе не пишу

Цитата(ALEXANDRO @ 2.10.2004, 07:43)

и ещё при прокрутке дива, он исчезает, mouseover'а нету!

Вот здесь трабла, окошко появляется по событию focus и исчезает по blur в селекте. Пауза при скрытии стоит, дабы позволить другим событиям отработать прежде чем окошко исчезнет. Если этого не сделать, то при клике на слове в окошке, оно не вставится в текстовое поле. При прокрутке окошка мы теряем фокус с поля и у нас есть 100мс на выбор элемента

Возможное решение: ловим клик на доументе, скрываем окошко; по blur ставим таймер на 5 сек, далее скрываем, по focus и mouseover в окошке оттягиваем скрытие еще на N времени. Думайте, решайте

Обьясню коротко как все работает, вчера времени на это не было.
Создается фишка на существующем поле при вызове функцииcreateList. Аргументы: родительское_текстовое_поле, масив_слов_в_окошке. Можно создавать сколько угодно таких контролов для каждого текстового поля, вся инфа о них хранится в массиве createList.sel_list_info.
Весь смысл функции создать юзая DOM окошко(DIV.style.overflow="auto"), набить его данными и зарегистрировать обработчиков событий.

Обработчики row_mouse_out, row_mouse_over - вопросов вызывать не должны, отвечают за выделение строк в окошке. Их можно реализовать анонимными функциями(см. onfocus, onblur текстового поля).
row_click - вставляет текст из окошка в поле.

Обработчик list_input_keypress ловит событие keypress на текстовом поле и выполняет поиск подходящих значений. Используется бинарный поиск в отсортированном по возрастанию массиве, вспомним что в худшем случае число операций O(log2(arr.lngth)+7). В принципе можно реализовать префиксное дерево, но не думаю что в JS оно будет работать быстрее.

Видим что если чутьчуть подумать, то можно писать быстро работающие проги

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

Гость_Андрей

Дата 3.10.2004, 18:18 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

А твой скрипт с 1000 записей будет быстро работать??? И с сортировко проблемма, когда пишим там слово vsem вывод. все на V но при этом слово vsem ниже слова vingrad

Sardar

Дата 3.10.2004, 18:30 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

Цитата

А твой скрипт с 1000 записей будет быстро работать???

Да, для этого он и писался. Бинарный поиск найдет значение за логарифмическое время.

Цитата

И с сортировко проблемма, когда пишим там слово vsem вывод. все на V но при этом слово vsem ниже слова vingrad

В алфовитном порядке слово vsem стоит дальше чем vingrad

А внизу оно стоит, т.к. прокручивать дальше некуда

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

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