На странице живой поиск (мгновенное обновление)

Question

Я хотел бы использовать мгновенный поиск в Google, как мой сайт, мой URL-адрес http://gamersweb.net/games

весь контент, который нужно искать, будет существовать на этой странице, он не извлекает его из базы данных или чего-либо еще.

Некоторое время назад я просматривал случайные плагины jquery и увидел этот действительно крутой плагин в виде яблока, который может использовать все миниатюры и сортировать их, изменять их размеры и искать по ним, и все это было очень круто анимировано. Я не отмечал это, и я не могу найти это. Но это может быть мое решение, однако, все будет делать. Я думал, что, возможно, можно назначить теги rel всем моим тегам img и использовать поиск, чтобы найти соответствующий тег rel на основе запроса.

Answer 1

Я думаю, что это поможет вам

http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/

Answer 2

Вот что вы можете сделать с Ajax, PHP и JQuery.Надеюсь, что это поможет или даст вам начало.

См. Живую демонстрацию и исходный код здесь.

http://purpledesign.in/blog/to-create-a-live-search-like-google/

Создайте окно поиска, может быть поле ввода, подобное этому.

<input type="text" id="search" autocomplete="off">

Теперь нам нужно прослушать все, что пользователь вводит в текстовую область.Для этого мы будем использовать jquery live () и событие keyup.В каждом keyup у нас есть функция jquery «search», которая будет запускать php-скрипт.

Предположим, у нас есть html, подобный этому.У нас есть поле ввода и список для отображения результатов.

 <div class="icon"></div>
 <input type="text" id="search" autocomplete="off">
 <ul id="results"></ul>

У нас есть сценарий Jquery, который будет прослушивать событие keyup в поле ввода, и если оно не пустое, он вызовет поиск () функция.Функция search () запустит скрипт php и отобразит результат на той же странице, используя AJAX.

Вот JQuery.

$(document).ready(function() {  

    // Icon Click Focus
    $('div.icon').click(function(){
        $('input#search').focus();
    });

    //Listen for the event
        $("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));
        };
    });


    // 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_st.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    $("ul#results").html(html);

                }
            });
        }return false;    
    }



});

В php выполните запрос кБаза данных MySQL.PHP вернет результаты, которые будут помещены в HTML с помощью AJAX.Здесь результат помещается в html-список.

Предположим, что существует фиктивная база данных, содержащая две таблицы животных и птицы с двумя похожими именами столбцов 'type' и 'desc'.

 //search.php

// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";

//  Connection
global $tutorial_db;

$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");

//  Check Connection
if ($tutorial_db->connect_errno) {
    printf("Connect failed: %s\n", $tutorial_db->connect_error);
    exit();
}
    $html = '';
    $html .= '<li class="result">';
    $html .= '<a target="_blank" href="urlString">';
    $html .= '<h3>nameString</h3>';
    $html .= '<h4>functionString</h4>';
    $html .= '</a>';
    $html .= '</li>';
     $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 animals
     WHERE type LIKE '%".$search_string."%'
     UNION ALL SELECT *
     FROM birf
     WHERE type LIKE '%".$search_string."%'"
     ;
    $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['desc']);
                $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
            $display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';

                // 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);
        }
    }