Меню
Что нового?

AJAX и "To:" как в GMail

  • Автор темы Автор темы xionik
  • Дата начала Дата начала

xionik

Новичок
AJAX и "To:" как в GMail

Собственно такой вопрос - кто-нибудь реализовывал или сталкивался с примером того, как реализовать возможность наподобие имеющейся в GMail, когда вводишь текст кому отправлять почту (выпадающий список со всеми совпадениями набираемого текста). Интересуют конкретно этот пример.
 
Если я не ошибаюсь это называется инкрементальный поиск.
Реализовывал. Делал обычный инпут и к нему приресовал div с результатами
 
document.getElementById('id_of_div').style.width = document.getElementById('id_of_input').offsetWidth;

примерно так :)

но дешевле - прописать в стилях одинаковую ширину.
 
это проще но почемуто разные браузера по разному на это смотрят
 
xionik
не красиво выглядит, больно просто

у меня кое что получилось но вогнать в размеры инпута не получается

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
        position:relative;
        left:2px;
        width:40ex;
        height:120px;
        z-index:1;
        top: 1px;
        padding-top: 2em;
}
.possibility {
        position: relative;
        top: 2px;
        display: block;
}
#editAJAX {
        background-color: #CCFFCC;
        position: relative;
        vertical-align: bottom;
}
#Layer2 {
        background-color: #FFCCCC;
        overflow: auto;
        height: 8em;
        width: 100%;
        border: 1px solid #000000;
}

.possibility .LoadList {
        white-space: pre;
        padding-left: 1ex;
        background-color: #E1F0FF;
        opacity: 0.70;
        font-weight: bold;
        display: inline;
        margin-top: 2px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
        float: left;
        position: absolute;
}
.clearanceEdit {
        position: relative;
        height: 1ex;
        width: 1px;
}
#editAJAX input {
        font-family: "Times New Roman", Times, serif;
        font-size: medium;
}
.possibility .list {
        background-color: #E1F0FF;
        position: relative;
        height: 16ex;
        width: 19em;
        overflow: auto;
        border: 1px solid #000000;
        display: block;
}

.possibility .helpList {
        position: absolute;
}

.list a {
        position: relative;
        text-decoration: none;
        overflow: hidden;
        white-space: pre;
        color: #000000;
        width: 17em;
        clear: left;
        float: left;
        padding-left: 1ex;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
}

.list a:hover {
        background-color: #000066;
        color: #FFFFFF;
}
.list a:focus {
        background-color: #055E83;
        color: #FFFFFF;
}
-->
</style>
<script>
function startt(obj) {
      l = obj.parentNode.childNodes.length;
      for (i = 0; i<=l-1; i++) {
            if (obj.parentNode.childNodes.item(i) == obj) {
                                if (i != (l-1) ) {
                                              newObj = obj.parentNode.childNodes.item(i+1);
                                              newObj.parentNode.insertBefore(document.getElementById('divFastIn'), newObj);
                                             } else {
                                                          obj.parentNode.appendChild(document.getElementById('divFastIn'));
                                                          };
                               return;
                               };

            };
}
</script>
</head>

<body>


 <input name="textfield" type="text" id="textfield" size="40" onfocus="startt(this);" />
 <div class="possibility" id="divFastIn" width="100px">
   <div class="helpList">
    <div class="list" FF="yes">
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Chariot N33W -94</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Delica 95- PD5W</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Diamant F3#A F4#A 95-</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Diamant F31</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC FTO</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Galant E32</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Galant,Legnum EA#A</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Lancer Liber CB#A 91-</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Lancer Liber CB3A 91-</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Lancer Mirage C62A</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Mirag CJ2A 3Door 95-</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Pajero -96 4 DOOR</a>
                <a href="javascript:alert('xa-xa');">Бампер FR MMC Pajero IO H76W</a>
                <a href="javascript:alert('xa-xa');">Бампер FR Nis AD Y10</a>        </div>
        <div class="LoadList">идет загрузка...</div>
   </div>
 </div>
<div>
оврапоры ывлаопрлоывар плывоарп ывалопры влаопрлыв арплоарв лпоыврапл ывалпорвыа пловрап лыворывлаопрыв алоплывоап лывопл ывлоап лвоапрлы вапылворплыворпл ыоврлпорлыворпло ыврлаопрл ывоплорывлпорылворплорывлпрлыоврплорывлраы влаопр ывлорлв ыоапрлыв л выплорыв плоыра плыоврапл ывалпорывлаопрлыворпловырпл вылпорывл аопрлывоапрлывопвор </div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<table width="100%" border="1">
  <tr>
    <td width="56%">&nbsp;</td>
    <td width="44%"><input type="text" name="textfield2" onfocus="startt(this);" id="labb" /></td>
  </tr>
</table>
<div>
оврапоры ывлаопрлоывар плывоарп ывалопры влаопрлыв арплоарв лпоыврапл ывалпорвыа пловрап лыворывлаопрыв алоплывоап лывопл ывлоап лвоапрлы вапылворплыворпл ыоврлпорлыворпло ыврлаопрл ывоплорывлпорылворплорывлпрлыоврплорывлраы влаопр ывлорлв ыоапрлыв л выплорыв плоыра плыоврапл ывалпорывлаопрлыворпловырпл вылпорывл аопрлывоапрлывопвор </div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
jjjj
</body>
</html>
 
flash-vkv, не понял, если честно. Теперь что, просто - это плохо?
 
в смысле дизайна, и потом раскрываюшийся список вполне справляется с тем что делает этот пример, конечно если нет необходимости добовлять то чего нет, но и тогда можно добавить кнопку с "+", это куда будет красивей и понятней пользователю

а если список будет в 1000 рядов, то что юзер будет качать его весь?
 
Войдите или зарегистрируйтесь для ответа.
Сверху