jQuery: plugin Autocomplete cz. II

Autor: Arkadiusz Tobiasz 24 stycznia 2011

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.

komentarze 3

  1. Radek napisał(a):

    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’

    • Arkadiusz Tobiasz napisał(a):

      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

  2. Radek napisał(a):

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

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]