Auf der Seite live search (sofortige Aktualisierung)

Hier ist etwas, das Sie tun können, mit Ajax, PHP und JQuery. Hoffe das hilft dir weiter oder gibt dir eine start.

Siehe live-demo und source-code hier.

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

Erstellen Sie ein such-Feld kann ein Eingabefeld wie diesem.

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

Nun müssen wir hören, was die Benutzer auf den text-Bereich. Für diese verwenden wir die jquery live() und keyup-Ereignis ein. Auf jedem keyup
wir haben ein jquery-Funktion "Suche" ausgeführt wird, ein php-Skript.

Nehmen wir an, wir haben das html wie dieses. Wir haben ein Eingabefeld und eine Liste um die Ergebnisse anzuzeigen.

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

Wir haben ein Jquery-Skript, das hören auf das keyup-Ereignis auf das Eingabefeld, und wenn es nicht leer ist, es wird aufgerufen, die search () - Funktion. Die
search () - Funktion ausgeführt wird das php-script und zeigt das Ergebnis auf der gleichen Seite mit AJAX.

Hier ist die 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;    
    }



});

In der php, Schießen Sie eine Abfrage, um die mysql-Datenbank. Das php-Skript gibt die Ergebnisse zurück, die in der html mit AJAX. Hier das Ergebnis in
eine html-Liste.

Angenommen, es ist ein dummy-Datenbank mit zwei Tabellen, Tiere und Vogel mit zwei gleichen Spaltennamen 'Typ' und '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);
        }
    }