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ć .