<input type="text" onkeyup="lookup(this.value, 'id_select', 'http://localhost/cgi-bin/xmlhttp.cgi')" /><select id="id_select" name="id_select"><option selected="selected" value="">option>select>
function lookup(text, select_id, url) { // Получаем объект XMLHTTPRequest if(!this.http){ this.http = get_http(); this.working = false; } // Запрос if (!this.working && this.http) { var http = this.http; // Если в текстовом поле менее трёх // символов – не делаем ничего if (text.length <3 ) return;//добавляем закодированный текст //в URL запроса url = url + "?text="+encodeURIComponent(text); //создаём запрос this.http.open("GET", url, true); //прикрепляем к запросу функцию-обработчик //событий this.http.onreadystatechange = function() {// 4 – данные готовы для обработки if (http.readyState == 4) { fill(select_id, http.responseText); this.working = false; }else{ // данные в процессе получения, // можно повеселить пользователя //сообщениями // ЖДИТЕ ОТВЕТА } } this.working = true; this.http.send(null); } if(!this.http){ alert('Ошибка при создании XMLHTTP объекта!') } }
function get_http(){ var xmlhttp; /*@cc_on @if (@_jscript_version >= 5) try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } @else xmlhttp = false; @end @*/ if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; } } return xmlhttp;}
id1tname1nid2tname2n...
function fill (select_id, data){ // поле SELECT в переменную в виде объекта var select = document.getElementById(select_id); // очищаем SELECT select.options.length = 0; // если данных нет – не делаем больше ничего if(data.length == 0) return; // в массиве arr – строки полученной таблицы var arr = data.split('n'); // для каждой строки for(var i in arr){ // в массиве val – поля полученной таблицы val = arr[i].split('t'); // добавляем новый объект OPTION к нашему SELECT select.options[select.options.length]= new Option(val[1], val[0], false, false); }}