За последние 24 часа нас посетили 19372 программиста и 1655 роботов. Сейчас ищут 1136 программистов ...

input выпадающий список vkontakte.ru

Тема в разделе "JavaScript и AJAX", создана пользователем Danilevsky, 28 янв 2008.

  1. Danilevsky

    Danilevsky Активный пользователь

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Добрый день уважаемые!
    Встала задача написать поиск по базе данных с приминением ajax.
    При вводе данных в поле input type="text" должен появляться выпадающий список с подходящими результатами.

    посмотреть работу такого решения можно на сайте vkontakte.ru
    или на скрине:

    [​IMG]

    перед началом работы над данным решением хотел бы поинтересоваться.
    Возможно кто-нибудь знает готовые фреймворки?
    Возможно кто-то уже пытался делать подобное?
    Возможно где-то описывался данный метод (его недостатки и приимущества).
    Короче говоря хочется быть максимально подкованным перед началом выполения задачи.
    Буду благодарен за любую инфу.
    Спасибо.
     
  2. armadillo

    armadillo Активный пользователь

    С нами с:
    6 апр 2007
    Сообщения:
    2.380
    Симпатии:
    0
    Адрес:
    Russia, Moscow
    поиск по форуму
    "вложенные селекты"
    "простейший пример"
     
  3. 440Hz

    440Hz Старожил
    Команда форума Модератор

    С нами с:
    21 дек 2012
    Сообщения:
    8.003
    Симпатии:
    1
    Адрес:
    Оттуда
    php.ru - поиск на главной. делов на 5 минут
    тока щаз отключено кажися.
     
  4. dAllonE

    dAllonE Guest

    Ага а жалко, было удобно )


    Ну если в лом самостоятельно через JS делать.
    Можно JQuery использовать... Там пара строчек буквально...
     
  5. Danilevsky

    Danilevsky Активный пользователь

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    наверное я не в тот раздел тему запостил. ((
    сам ajax организовать рас плюнуть.
    вся загвоздка в css и браузерах, а точнее отображение контейнера с резульатами прокруткой.
    пока только ff ведет себя хорошо.
    самое главное сайт вкантакте отображает все нормально.
    буду изучать их css-код.
     
  6. armadillo

    armadillo Активный пользователь

    С нами с:
    6 апр 2007
    Сообщения:
    2.380
    Симпатии:
    0
    Адрес:
    Russia, Moscow
  7. S.t.A.M.

    S.t.A.M. Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    1.041
    Симпатии:
    0
    У меня на сайте такое стоит. Стащил отсюда: http://jetune.ru
    Если надо скину исходники, но там полюбому тебе придется самому разбираться...
     
  8. Danilevsky

    Danilevsky Активный пользователь

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    ну разбираться всегда приходится ))
    был бы очень признателен если бы ты выслал исходники!!

    мыло: dandmitry собака мыло.ру
     
  9. Danilevsky

    Danilevsky Активный пользователь

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Вот что выходит:

    [​IMG]

    только ff правильно все отображает.
    остальные браузеры видимо игнорируют border при скроллинге и отображают список на 2px меньше по ширине. (

    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2.    "http://www.w3.org/TR/html4/loose.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4.  
    5. <head>
    6.     <title>dropdown</title>
    7.     <meta http-equiv="content-type"
    8.         content="text/html;charset=utf-8" />
    9.     <meta http-equiv="Content-Style-Type" content="text/css" />
    10.     <style type="text/css">
    11.         body {
    12.             margin:0;
    13.         }
    14.         .input_cnt {
    15.             margin:20px 0 0 20px;
    16.         }
    17.         input {
    18.             border:1px solid #ccc;
    19.             width: 200px;
    20.         }
    21.         .dropdown {
    22.             overflow: auto;
    23.             overflow-x: hidden;
    24.             max-height: 150px;
    25.             height: expression(this.scrollHeight > 150 ? '150px' : this.scrollHeight + "px");
    26.             border: 1px solid #C0CAD5;
    27.             border-top: none;
    28.             padding: 0px;
    29.             width: 200px;
    30.         }
    31.     </style>
    32. </head>
    33.  
    34. <body>
    35.     <div class="input_cnt">
    36.         <input type="text" name="input" />
    37.         <div class="dropdown">
    38.             вася<br />
    39.             петя<br />
    40.             маша<br />
    41.             валя<br />
    42.             коля<br />
    43.             галя<br />
    44.             катя<br />
    45.             тихон<br />
    46.             иван<br />
    47.             игнат<br />
    48.             алексей<br />
    49.             никита<br />
    50.             киндрат
    51.         </div>
    52.     </div>
    53. </body>
    54. </html>