Форма поиска. Результат
Есть форма поиска:
<!-- Main Input --> <input type="text" id="search" autocomplete="off"> <!-- Show Results --> <h4 id="results-text">Showing results for: <b id="search-string">Array</b></h4> <ul id="results"></ul> Результат выводится в <ul id="results"> .... Как сделать что-бы при нажатии на результат в ul, заполнялась сама форма выбранным результатом поиска. То есть как в яндекс или гугл-поиске. Js: // Start Ready $(document).ready(function() { // Icon Click Focus $('div.icon').click(function(){ $('input#search').focus(); }); // Live Search // On Search Submit and Get Results function search() { var query_value = $('input#search').val(); $('b#search-string').html(query_value); if(query_value !== ''){ $.ajax({ type: "POST", url: "search.php", data: { query: query_value }, cache: false, success: function(html){ $("ul#results").html(html); } }); }return false; } $("input#search").live("keyup", function(e) { // Set Timeout clearTimeout($.data(this, 'timer')); // Set Search String var search_string = $(this).val(); // Do Search if (search_string == '') { $("ul#results").fadeOut(); $('h4#results-text').fadeOut(); }else{ $("ul#results").fadeIn(); $('h4#results-text').fadeIn(); $(this).data('timer', setTimeout(search, 100)); }; }); }); PHP: // Define Output HTML Formating $html = ''; $html .= '<li class="result">'; $html .= '<a target="_blank" href="urlString">'; $html .= '<h3>nameString</h3>'; $html .= '</a>'; $html .= '</li>'; // Get Search $search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']); $search_string = $tutorial_db->real_escape_string($search_string); // Check Length More Than One Character if (strlen($search_string) >= 1 && $search_string !== ' ') { // Build Query $query = 'SELECT * FROM search WHERE name LIKE "%'.$search_string.'%" LIMIT 0 , 10'; // Do Search $result = $tutorial_db->query($query); while($results = $result->fetch_array()) { $result_array[] = $results; } // Check If We Have Results if (isset($result_array)) { foreach ($result_array as $result) { // Format Output Strings And Hightlight Matches $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['name']); $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['name']); $display_url = 'http://php.net/manual-lookup.php?pattern='.urlencode($result['name']).'&lang=en'; // Insert Name $output = str_replace('nameString', $display_name, $html); // Insert Function $output = str_replace('functionString', $display_function, $output); // Insert URL $output = str_replace('urlString', $display_url, $output); // Output echo($output); } }else{ // Format No Results Output $output = str_replace('urlString', 'javascript:void(0);', $html); $output = str_replace('nameString', '<b>No Results Found.</b>', $output); $output = str_replace('functionString', 'Sorry :(', $output); // Output echo($output); } } |
Часовой пояс GMT +3, время: 23:04. |