HTML+CSS+JavaScript

Ребята, подскажите как реализовать подсказку при вводе текста в строку поиска чтоб отображались первые совпадения с вводимым словом?

Вот хороший гибкий плагин для jQuery:
http://jqueryui.com/demos/autocomplete/

Он берет слова из списка статического:

<script>     $(function() {         var availableTags = [             "ActionScript",             "AppleScript",             "Asp",             "BASIC",             "C",             "C++",             "Clojure",             "COBOL",             "ColdFusion",             "Erlang",             "Fortran",             "Groovy",             "Haskell",             "Java",             "JavaScript",             "Lisp",             "Perl",             "PHP",             "Python",             "Ruby",             "Scala",             "Scheme"         ];         $( "#tags" ).autocomplete({             source: availableTags         });     });     </script>

А мне желательно чтоб из базы брал слова на совпадение

Он много всего умеет. Вы посмотрели только первый пример. В правой колонке есть много других примеров. Например "Remote datasource"
http://jqueryui.com/demos/autocomplete/#remote
В этом случаи он будет подтягивать данные, полученные от скрипта, который указан в параметре source. А скрипт, соответственно, может выбирать необходимые данные из базы. Следующий пункт "Remote with caching" тоже интересен - однажды подтянутые результаты кэшируются.

Плюс ко всему вы можете формировать JS файл динамически и в массив availableTags помещать то, что вам нужно.

Давайте разберем пример...
Я смотрю исходник и не пойму как он работает, где запрос в базу?

<style>     .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }     #city { width: 25em; }     </style>     <script>     $(function() {         function log( message ) {             $( "<div/>" ).text( message ).prependTo( "#log" );             $( "#log" ).attr( "scrollTop", 0 );         }         $( "#city" ).autocomplete({             source: function( request, response ) {                 $.ajax({                     url: "http://ws.geonames.org/searchJSON",                     dataType: "jsonp",                     data: {                         featureClass: "P",                         style: "full",                         maxRows: 12,                         name_startsWith: request.term                     },                     success: function( data ) {                         response( $.map( data.geonames, function( item ) {                             return {                                 label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,                                 value: item.name                             }                         }));                     }                 });             },             minLength: 2,             select: function( event, ui ) {                 log( ui.item ?                     "Selected: " + ui.item.label :                     "Nothing selected, input was " + this.value);             },             open: function() {                 $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );             },             close: function() {                 $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );             }         });     });     </script> <div class="demo"> <div class="ui-widget">     <label for="city">Your city: </label>     <input id="city" />     Powered by <a href="http://geonames.org">geonames.org</a> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial">     Result:     <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> </div><!-- End demo --> <div class="demo-description"> <p>The Autocomplete widgets provides suggestions while you  type into the field. Here the suggestions are cities,  displayed when at least two characters are entered into the  field.</p> <p>In this case, the datasource is the <a  href="http://geonames.org">geonames.org webservice</a>.  While only the city name itself ends up in the input after  selecting an element, more info is displayed in the  suggestions to help find the right entry. That data is also  available in callbacks, as illustrated by the Result area  below the input.</p> </div><!-- End demo-description -->

Вот простейший пример:

<!DOCTYPE html> <html> <head>   <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />     <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>   <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>   <script type='text/javascript'>     $(document).ready(function() {       var items = [               "ActionScript",               "AppleScript",               "Asp",               "BASIC",               "C",               "C++",               "Clojure",               "COBOL",               "ColdFusion",               "Erlang",               "Fortran",               "Groovy",               "Haskell",               "Java",               "JavaScript",               "Lisp",               "Perl",               "PHP",               "Python",               "Ruby",               "Scala",               "Scheme"           ];       $("INPUT#search").autocomplete({         source: items       });//end of autocomplite()     });//end of ready()   </script> </head> <body>   <form>     <input type="text" id="search" name="search" style="width: 200px;">   </form> </body> </html>

Работает он следующий образом:
В теге <head> присоединяются необходимая плагину таблица стилей, jQuery и сам плагин.
В переменной items сохранены все элементы, которые являются подсказками.
Эта часть:

$("INPUT#search").autocomplete({   source: items });

Применяет плагин к элементу с идентификатором search
Далее, при вводе текста ищутся вхождения набранного текста в элементах. Те элементы, которые содержат вхождения отображаются под текстовым полем.

Касательно файлов, которые присоединяются в теге head. Таблица стилей является CSS-фреймворком, который используется плагинами проекта jQuery UI(user interface). Этот фреймворк вы можете кастомизировать под себя выбрав тему себе по вкусу http://jqueryui.com/themeroller/#themeGallery. Также на этой странице можно кастомизировать конкретную тему под свои нужды. Советую выбрать тему, при желании её отредактировать на сайте, и загрузить (на странице загрузки нажмите на ссылку Deselect all components, потом отметьте Automplite и загружайте - таким образом вы загрузите свою тему и JS, который необходим плагину Autocomplite, при этом не загрузите ничего лишнего). После загрузки в CSS файл не лезьте, не правьте там ничего. Он достаточно сложен и там много чего друг с другом связано.

Т.е. алгоритм такой:
1. Переходите на страницу с темами: http://jqueryui.com/themeroller/#themeGallery
2. Выбираете тему себе по вкусу.
3. При желании её редактируете на сайте (ссылка Edit под темой)
4. Далее нажимаете Download
5. На странице загрузки снимаете все чекбоксы. Потом устанавливаете чекбокс напротив Autocomplite
6. Жмете download
После этого вы загрузите свою тему и весь необходимый JS.
Ну а дальше в теге head вашей страницы присоединяете css файл из папки css и все js файлы из папки js.

Теперь то, что касается формирования списка подсказок динамически.
1. Вы можете заранее динамически сформировать массив items на серверной стороне (т.е. серверный скрипт сформирует массив items, который потом использует JS-сценарий)
2. Вы можете настроить плагин таким образом, чтобы при вводе данных он обращался к серверному сценарию и показывал те подсказки, которые получил от серверного сценария. В этом случаи в параметре source нужно передать не массив с данными для подсказок, а строку, в которой содержится ссылка на серверный сценарий. При этом серверному сценарию будет передан GET-параметр term, в котором будет содержаться содержимое текстового поля. Серверный сценарий должен ответить массивом с данными.
Пример:

<!DOCTYPE html> <html> <head>   <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />   <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>   <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>   <script type='text/javascript'>     $(document).ready(function() {       $("INPUT#search").autocomplete({         source: "search.php"       });//end of autocomplite()     });//end of ready()   </script> </head> <body>   <form>     <input type="text" id="search" name="search" style="width: 200px;">   </form> </body> </html>

search.php

<?php //Отправляем данные echo '["First", "Second"]'; ?>

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