jQuery: plugin Autocomplete cz. II

W poprzednim wpisie opisałem podstawowe możliwości pluginu jQuery jakim jest Autocomplete. W tym wpisie postaram się pokazać w jaki sposób możemy wykorzystać ten plugin w oparciu o dane pobierane z zewnętrznego źródła, w tym wypadku jednej z tabel bazy danych MySQL.

W naszym skrypcie będziemy chcieli użytkownikowi wprowadzającemu dane do inputa podpowiadać marki modelu samochodu jakie zostały już dodane do naszego serwisu. W tym celu musimy posiadać odpowiednią tabelę w naszej bazie danych:

1
2
3
4
5
6
7
8
CREATE TABLE `marki` (
`id` INT(9) NOT NULL AUTO_INCREMENT,
`marka` VARCHAR(255) NOT NULL DEFAULT '',
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin2 ;

INSERT INTO `marki` VALUES(1, 'Audi');
INSERT INTO `marki` VALUES(2, 'BMW');

Nasz formularz posiada odpowiednie pole input:

1
<input type="text" id="marka" name="marka" value="">

W tym przypadku nasz kod javascript będzie wyglądał tak:

1
2
3
4
5
6
<script type="text/javascript">
var data = "Katowice Kraków Toruń Warszawa Łódź".split(" ");
$("input[name='marka']").autocomplete('marki.php', {
     autoFill: true
});
</script>

Jak zauważyłeś odwołujemy się do pliku marki.php, który będzie pobierał odpowiednie dane z tabeli marki. Kod tego pliku będzie wyglądał tak:

1
2
3
4
5
6
7
8
9
$key = $_GET['q'];
 
$db = new MySQL();
$result = $db->query("SELECT * FROM marki WHERE marka LIKE '%".$key."%';");
while ($result->valid()) {
    $row = $result->current();
    echo $row['id']."|".$row['marka']."\n";
    $result->next();
}

Krótkie objaśnienie powyższego kodu. Zmienna $key to aktualna wartość inputa, który jest uzupełniany przez użytkownika. Z wpisaniem każdej kolejnej litery następuje połączenie się z tym plikiem i pobranie nowych danych pasujących do aktualnie wpisanego ciągu znaków.

Następnie łączymy się z bazą danych i wykonujemy odpowiednie zapytanie. Z wykorzystaniem Iteratora prezentujemy w kolejnych wierszach pasujące dane z tabeli.

Oczywiście możemy odpowiednie sformatować wyświetlane dane w podpowiedziach jak i określić, którą wartość z tabeli ma porównywać i zwracać w rezultacie. To tego służą opisywane przeze mnie w poprzednim wpisie opcje formatItem, formatMatch, formatResult.

Nasz kod JavaScript ulegnie zmianie:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
var data = "Katowice Kraków Toruń Warszawa Łódź".split(" ");
$("input[name='marka']").autocomplete('marki.php', {
    width: 400,
    formatItem: function(row, i, max) {
        return "<b>" + row[1] + "</b> (Id: " + row[0] + ")";
    },
    formatMatch: function(row, i, max) {
        return row[1];
    },
    formatResult: function(row) {
        return row[1];
    }
});
</script>

Dzięki tej zmianie podczas wyświetlania podpowiedzi nazwy marek zostaną pogrubione, a oprócz nich w nawiasie wyświetlony zostanie identyfikator wiersza w naszej tabeli. Kolejna opcja „mówi”, że wpisywany przez użytkowników ciąg znaków ma być porównywany z nazwą marki, a ostatni, że po wybraniu jakiejkolwiek podpowiedzi ma jako wartość inputa wyświetlić również nazwę marki.

Comments

Radek

Witam, mam pytanie. Jak wyglądałby skrypt aby pole formularza input[name=’marka’] wysyłał za pomocą INSERT INTO wartość ‚id_id’ a nie wartość z pola ‚id_id’ ponieważ wybierane dane będą po nazwie „marce” a do bazy do innej tabeli wysyłana jedynie wartość z pola ‚id_id’

Reply
    Arkadiusz Tobiasz

    W tym przypadku najlepiej utworzyć ukrytego inputa

    1
    <input type="hidden" name="marka_id" id="marka_id" value="">

    a w momencie prezentowania rezultatu aktualizować wartość tego inputa,

    Zamiast:

    1
    2
    3
    formatResult: function(row) {
            return row[1];
        }

    dać

    1
    2
    3
    4
    formatResult: function(row) {
           $('#marka_id').val(row[0]);
            return row[1];
        }

    Jednakże nie testowałem tego rozwiązania

    Reply
Radek

powinno być: …a nie z pola ‚marka’ ponieważ ….
przepraszam za bład.

Reply

Leave a Comment

six + three =