Autocompleter w Jquery
Jakiś czas temu pisałem o auto uzupełnianiu tekstu. Poprzedni sposób oparty było o funkcjonalności prototype i script.aculo.us.
Dzisiaj chciałbym wam przybliżyć autocompleter z wykorzystaniem JQuery.
Jedną z ważniejszych zalet rozwiązania opartego na jQuery jest jego waga czyli ok 24kB po zminimalizowaniu i skompresowaniu jspackerem, plus kilka kilo na plugin autocompletera i style, prototype i script.aculo.us 80kB, zysk jest dosyć duży, chociaż nie ma to aż takiego znaczenia dla małych i średnich stron. Pozatym jquery.autocompleter wydaje się bardziej elastyczny i jest w jakimś stopniu konfigurowalny w stosunku do pary prototype - scriptaculous.
Do stworzenia autocompletera możemy użyć kilku pluginów napisanych do jQuery jednak większość to powielanie tych samych rozwiązań przy lepszym lub gorszym ich wykonaniu.
Zaciągamy więc sobie plugin Autocomplete i podłączamy go wraz z jquery do stronki w taki oto sposób:
Przykład 1.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <head> <script type="text/javascript" src="./jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="./jquery.autocomplete.js"></script> <script type="text/javascript"> <!-- $(document).ready(function() { $("#nazwa").autocomplete("data.php"); }); //--> </script> </head> <body> <input type="text" name="nazwa" id="nazwa" /> </body> </html> |
Możemy dodać kilka dodatkowych opcji które pozwolą nam na zmienienie pewnych właściwości autocompletera.
Przykład 2.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript"> <!-- function formatItem(row) { return row[0] + "<br><i style='font-size:11px;'>" + row[1] + "</i>"; } $(document).ready(function() { $("#nazwa").autocomplete("data.php", { minChars:2, matchSubset:false, cacheLength:10, formatItem:formatItem, }).result( function(event, data, formatted){alert("Wybrałeś "+formatted)}); }); //--> </script> |
formatItem() funkcja formatuje elementy listy.
matchSubset ustawiony na true uruchamia filtrowanie po stronie przeglądarki dla cachowanych wcześniejszych zapytań, co pozwala nam zmniejszyć ilosć zapytań do skryptu php.
cacheLength odpowiada za cachowanie zapytań, podajemy ile ostatnich zapytań będziemy cachować.
.result() metoda ta jest uruchamiana po wybraniu przez nas jednej z opcji.
Więcej opcji można znaleźć w documentacji Jquery Autocompleter.
W obu przypadkach dane ze skryptu php są zwracane w takiej postaci:
1 2 3 4 5 6 | <?php echo "Abcd|opis1\n"; echo "Abcde|opis2\n"; echo "Abcdef|opis3\n"; echo "Abcdefg|opis4\n"; ?> |
Oczywiście po stronie skryptu nie ma żadnego filtrowanie, więc jeśli wpiszemy cokolwiek to zawsze otrzymamy te same dane.
Powiązane wpisy:
Witam , Bardzo przydatny skrypt do ilości rekordów 1000 .Testowałem go i mam problem z szybkościa działania w ilości około 10tys rekordów czas oczekiwania wynosi około 10 sek. Dobrym rozwiązaniem było by podzielenie bazy wg.alfabetu i po wpisaniu pierwszej litery np “a” Autocompleter załadował by z pliku np. a.txt rekordy z literą “a” na poczatku itd .”b” - b.txt ….tylko w jaki sposób to zrealizować .
Ja używa tego skryptu przy ok 12 tyś. rekordów i nie mam problemów. Musisz po testować ustawienia autocmplitera i limitować ilość zwracanych rekordów np “LIMIT 100″. Długo testowałem zanim znalazłem optymalne ustawienia, ale udało się. Fakt sam skrypt nie jest specjalnie szybki i zastanawiam się nad napisaniem własnego rozwiązania, ale na razie mi wystarcza. U mnie skrypt wyszukuje w bazie Firebird(która raczej jest wolna) i czasy mam dosyć dobre nie przekracza 0,5sek, a jeśli chodzi o rozwiązanie z plikami to raczej nie będzie szybsze, ale zawsze możesz spróbować.
dziekuję za odpowiedź .Zobaczę czy dam radę coś z tym zrobić .
witam
moj problem polega na tym ze majac w bazie zapisane np nazwiska i pierwsza litera jest duża litera to ta funkcja nie zwraca mi podpowiedzi, dopiero po wpisaniu drugiej w kolejności litery uruchamia ta funkcje, prosze o pomoc
Jest taka opcja “minChars:2″ czyli minimalna ilość znaków po których wpisaniu następuje sprawdzenie jak ustawiasz na dwa to dopiero po wpisaniu dwóch znaków będzie ci sprawdzać
hehe:) nie o to chodzi, bo to działa tylko wtedy jezeli w bazie mam wszystko z małej litery, po przeniesieniu projektu z postgresa na mysql, dziala wszystko wporzadku, z tego co mi sie wydaje problem jest w kodowaniu, choc na tym i na tym serwerze mam UTF-8, wiec dalej nie znam powodu
jasne. dzieki:)
Nawiązując do mojego poprzeniego pytanie, mam jeszcze jeden podobny problem. Może rozwinę to bardziej, otóż na początku zaznacze ze wykorzystuje silnik wyszukiwania zend_lucene. Dodając dane do bazy z fomularza korzystając z serwera postgres otrzymuje bład, kórego zas nie otrzymuje gdy korzystam z mysqla. Zaznaczam ze dane są dodawane pomyslenie do bazy oraz pomyslnie zaindeksowane. Podczas wyszukiwania otrzymuje bład:
[wrapped: SQLSTATE[22P02]: Invalid text representation: 7 ERROR: invalid input syntax for integer: “”
LINE 1: …_ID, xxx.ID FROM xxx WHERE xxx.ID IN (”,”,”,’…
^], co jest jednoznaczne, że zwraca nieprawidłowe dane w tym polu, czy tutaj tez jest to zwiazane z kodowaniem w postgresie??
Problem polega na tym, że przekazujesz do zapytania w miejscu gdzie powinien być integer stringa. Wydrukuj sobie zapytanie i zobacz czy nie masz w niektórych miejscach np. ‘1′ zamiast 1 w mysql nie stanowi to problemu postgres natomiast odczytuje to jako dwie różne wartości.
witam
używając tego widgetu natknąłem sie na jeszcze jede problem, otoż wykorzystując go w adminie generatorze a dokladnie w klasie filtru jest problem przy:
To z klasy filtru bazowej:
$this->setWidget(
‘pole’ => new sfWidgetFormFilterInput(array(’with_empty’ => true)),
);
A tutaj form filtru:
$this->setWidget(’pole’, new sfWidgetFormPropelJQueryAutocompleter(array(
‘model’ => ‘Dyplomy’,
‘url’ => ‘dyplomy/autoComplete’,
)));
Autopodpowiedz w formularzu filtru działa, lecz po uruchomieniu procesu filtracji nie zwraca wogole wyników