GAJDAW


MOJE KSIĄŻKI

Książka pt. Git. Recipes
Książka pt. Git. Rozproszony system kontroli wersji
Książka pt. PhpStorm Starter
Książka pt. Symfony w przykładach
Książka pt. GIMP. Praktyczne projekty. Wydanie II
Książka pt. PHP, MySQL i MVC. Tworzenie witryn WWW opartych na bazie danych
Książka pt. PHP. Praktyczne projekty

PROGRAMY

1 2 3 4


Słownik z autouzupełnianiem przy użyciu jQuery

Włodzimierz Gajda

3. Skrypty składające się na rozwiązanie

Słownik z podpowiedziami składa się z trzech skryptów:

Pierwszy z nich, podaj-wyrazy.php, zwraca listę słów, które są umieszczane na liście podpowiedzi z rysunku 2.

Drugi, podaj-wyjasnienie.php, zwraca wyjaśnienie słowa umieszczane pod formularzem (rysunek 3).

Trzeci, slownik.php, zawiera formularz oraz implementację interakcji z użytkownikiem.

3.1 Skrypt podaj-wyrazy.php

Skrypt podaj-wyrazy.php został przedstawiony na listingu 1.

Skrypt ten wykorzystuje dwie zmienne URL:

$_GET['limit']
$_GET['q']

Przykładowe wywołanie skryptu może mieć postać:

podaj-wyrazy.php?q=deta&limit=13

Wywołanie to zwróci pierwsze trzynaście wyrazów rozpoczynających się od liter 'deta'.

Jeśli zmienna limit nie jest podana, to zwracane są wszystkie słowa o danym prefiksie.

Jeśli nie podamy zmiennej q, to wynikiem będzie pełna lista słów ze słownika.

Skrypt ten wykorzystuje plik dane/dictionary.txt.

require_once 'walidacja.inc.php';

$p = file('dane/dictionary.txt');
$pc = count($p);

if (isset($_GET['limit']) && str_ievpi($_GET['limit'])) {

    $maks = $_GET['limit'];

} else {

    $maks = $pc;
    
}


if (isset($_GET['q']) && (preg_match('/^[a-z]+$/i', $_GET['q']))) {

    $wynik = array();
    
    for (
        $i = 0, $liczba_elementow = 0;
        ($liczba_elementow < $maks) && ($i < $pc);
	$i++
    ) {
        if (strpos($p[$i], $_GET['q']) === 0) {
            $wynik[] = $p[$i];
            $liczba_elementow++;
        };

    }


} else {

    $wynik = array_slice($p, 0, $maks);    
    
}

echo implode('', $wynik);

Listing 1. Pliki tekstowe — skrypt podaj-wyrazy.php

3.2 Skrypt podaj-wyjasnienie.php

Skrypt podaj-wyjasnienie.php wykorzystuje jedną zmienną URL:

$_GET['word']

Jego zadaniem jest wydrukowanie zawartości pliku tekstowego zawierającego wyjaśnienie wybranego słowa. Po wpisaniu adresu:

podaj-wyjasnienie.php?word=detinue

skrypt zwróci zawartość pliku tekstowego dane/words/detinue.txt, czyli wyjaśnienie słowa detinue.

Treść skryptu jest przedstawiona na listingu 2.

if (
    isset($_GET['word']) && 
    preg_match('/^[a-ząćęłńóśźż]+$/ui', $_GET['word']) 
    && file_exists('dane/words/' . $_GET['word'] . '.txt')
) {

    readfile('dane/words/' . $_GET['word'] . '.txt');
    
} else {
    echo 'brak';
}

Listing 2. Pliki tekstowe — skrypt podaj-wyjasnienie.php

Funkcja readfile() odczytuje i wysyła plik.

Wywołanie:

readfile('p.txt');

jest równoważne:

echo file_get_contents('p.txt');

3.3 Skrypt slownik.php

Skrypt slownik.php jest przedstawiony na listingu 3. Zawiera on znaczniki dołączające bibliotekę jQuery:

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="lib/thickbox-compressed.js"></script>
<script type="text/javascript" src="lib/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="lib/thickbox.css" />

implementację autouzupełniania w jQuery:

$(function() {

    $('#explanation').hide();

    $("#input_wyraz").autocomplete("podaj-wyrazy.php", {
            scroll: true
    });

    $('form').submit(function(){
        $('#explanation').load('podaj-wyjasnienie.php?word=' + 
	    $('#input_wyraz').attr('value'));                
        $('#explanation').show();
        return false;
    });              

    $("#input_wyraz").result(function(){

        $('#explanation').load('podaj-wyjasnienie.php?word=' + 
	    $('#input_wyraz').attr('value'));                	
        $('#explanation').show();            
    });

});

formularz:

<form action="slownik.php" method="get">
    <p>
        <label>Wyraz:</label>
        <input type="text" id="input_wyraz" name="word" />
        <input type="submit" value="Wyślij" />
    </p>
</form>

oraz kod obsługujący przeładowanie formularza:

<div id="explanation">
<?php

include('podaj-wyjasnienie.php');

?>
</div>

Rozwiązanie Ajaksowe będzie działało nawet wtedy, element div#explanation pozostawimy pusty:

<div id="explanation"></div>

Jeśli jednak chcemy, by rozwiązanie działało także przy wyłączonej obsłudze JavaScript, to należy dodać kod PHP wykonywany po przeładowaniu formularza. Najprościej wykonać to wykorzystując gotowy już skrypt podaj-wyjasnienie.php. Formularz stosuje metodę get, zaś element input ma nazwę word. Dzięki temu wewnątrz elementu div#explanation wystarczy dołączyć skrypt podaj-wyjasnienie.php:

include('podaj-wyjasnienie.php');
<!DOCTYPE...>
<html>
    ...
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="lib/jquery.js"></script>
    <script type="text/javascript" src="lib/jquery.bgiframe.min.js"></script>
    <script type="text/javascript" src="lib/jquery.ajaxQueue.js"></script>
    <script type="text/javascript" src="lib/thickbox-compressed.js"></script>
    <script type="text/javascript" src="lib/jquery.autocomplete.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/jquery.autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="lib/thickbox.css" />
    
    <script type="text/javascript">
    $(function() {
    
        $('#explanation').hide();

        $("#input_wyraz").autocomplete("podaj-wyrazy.php", {
            scroll: true
        });
        
        $('form').submit(function(){
            $('#explanation').load('podaj-wyjasnienie.php?word=' + 
	        $('#input_wyraz').attr('value'));                
            $('#explanation').show();
            return false;
        });              
        
	$("#input_wyraz").result(function(){

            $('#explanation').load('podaj-wyjasnienie.php?word=' + 
	        $('#input_wyraz').attr('value'));                	
            $('#explanation').show();            
	});

    });
    </script>
    
  </head>
<body>

<div>
    <form action="slownik.php" method="get">
        <p>
            <label>Wyraz:</label>
            <input type="text" id="input_wyraz" name="word" />
            <input type="submit" value="Wyślij" />
        </p>
    </form>
</div>

<div id="explanation">
<?php

include('podaj-wyjasnienie.php');

?>
</div>

</body>
</html>

Listing 3. Pliki tekstowe — skrypt slownik.php


Reklama

Szkolenia z Zend Framework 2.0


1 2 3 4