За последние 24 часа нас посетили 16477 программистов и 1567 роботов. Сейчас ищет 921 программист ...

Выпадающие результаты поиска (динамический input)

Тема в разделе "JavaScript и AJAX", создана пользователем sound, 15 авг 2013.

  1. sound

    sound Guest

    Нужен пример выпадающих результатов поиска как в яндекс или гугл или на этом сайте (вытащить с сайтов не предлагать, как я не бился ничего не вышло)
    Результат выпадает только когда написан какой либо символ в поле поиска
    Запрос результатов идет к БД

    Покажите самый простой пример с минимум кода, чтобы понять что и как.

    Все нужно именно теге input, а не select, потому что если резултатов поиска нет, то можно написать свой текст

    Добавлено спустя 28 минут 50 секунд:
    нашел пример http://jqueryui.com/autocomplete/
    только проблема как ограничить выпадающие результаты чтобы не всю высоту страницы занимали

    Код (Text):
    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="utf-8" />
    5. <title>jQuery UI Autocomplete - Default functionality</title>
    6. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    7. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    8. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    9. <link rel="stylesheet" href="/resources/demos/style.css" />
    10. <script>
    11. $(function() {
    12. var availableTags = [
    13. "ActionScript",
    14. "AppleScript",
    15. "Asp",
    16. "BASIC",
    17. "C",
    18. "C++",
    19. "Clojure",
    20. "COBOL",
    21. "ColdFusion",
    22. "Erlang",
    23. "Fortran",
    24. "Groovy",
    25. "Haskell",
    26. "Java",
    27. "JavaScript",
    28. "Lisp",
    29. "Perl",
    30. "PHP",
    31. "Python",
    32. "Ruby",
    33. "Scala",
    34. "Scheme"
    35. ];
    36. $( "#tags" ).autocomplete({
    37. source: availableTags
    38. });
    39. });
    40. </script>
    41. </head>
    42. <body>
    43. <div class="ui-widget">
    44. <label for="tags">Tags: </label>
    45. <input id="tags" />
    46. </div>
    47. </body>
    48. </html>
     
  2. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    цссэхой