FoxyComplete - Zaawansowane wyszukiwanie autouzupełniania z obrazami
Dzisiaj podzielę się modną funkcjonalnością, którą wdrażam od pewnego czasu w moich projektach.
Nazywam to "FoxyComplete" i polega na pobieraniu klikalnych wyników wyszukiwania wraz z obrazami, które są automatycznie pobierane z zawartości wyników lub z określonego pliku. Jest łatwy w implementacji i po wykonaniu łatwo go ulepszyć.
Zastosowanie tej funkcji jest całkowicie zależne od preferencji projektanta i programisty, ale jej wpływ na wrażenia użytkownika sprawia, że jest to najlepszy wybór do dodawania w nowoczesnych projektach i projektach rozwojowych.
Jednostki biznesowe, w których osobiście używałem tej funkcji to e-commerce, projekty korporacyjne, fotografia, rozrywka i przyszłe projekty, które wymagają kompleksowej funkcji wyszukiwania.
Jestem pewien, że wszyscy odwiedziliście IMDb i jabłko strony internetowe i wypróbowane ich funkcje wyszukiwania. Jeśli nie, poniżej znajduje się podgląd ich funkcji wyszukiwania zaawansowanego.
Wszyscy wiemy, że można to zrobić, ale wtedy pytanie brzmi: "Dlaczego zwykle nie jest to robione na wszystkich tych pięknie zaprojektowanych stronach internetowych?" Cóż, myślę, że to prawdopodobnie brak szybkiego, otwartego na wszystko rozwiązania!
Kiedy zaimplementowałem tę samą funkcję autouzupełniania z obrazami Blog z fotografiami które zaprojektowałem jakiś czas temu, było to z pewnością trudne do osiągnięcia, ale w końcu wyszło świetnie. Odwiedzający mój blog naprawdę lubią przeszukiwać moją galerię obrazów i natychmiast uzyskać podgląd tego, co zobaczą dalej.
Poniżej znajduje się wygląd funkcji wyszukiwania na moim blogu .
W tym samouczku omówię poniższe punkty
- Krótki przegląd skryptu
- FoxyComplete jako wtyczka WordPress (lokalna / dynamiczna)
- Wdrażanie FoxyComplete jako Youtube Search with Images
- Poprawa bezpieczeństwa
Dla projektantów WordPress to kawałeczek i dla programistów WordPress / PHP - to wielka szansa na poznanie licznych funkcjonalności i aplikacji, które ma do zaoferowania. W przypadku zaawansowanej implementacji wymagania będą podstawową znajomością WordPress, PHP, HTML, jQuery i CSS.
Krótki przegląd skryptu
Najpierw szybko podejdź do tego, co będziemy tworzyć w tym samouczku. Kliknij poniższy obraz, aby uzyskać podstawowe demo .
Należy pamiętać, że ten samouczek utrzymuję na bardzo podstawowym poziomie, aby wszyscy go zrozumieli i każdy może go zaprojektować lub dostosować zgodnie z ich wymaganiami. Funkcjonalność, którą stworzyłem została zainspirowana przez jQuery Autocomplete Plugin Jorn Zaefferer.
Powyższy szybki przykład autouzupełnia tytuł wyniku, ale możemy go również zmodyfikować, aby przekierować do adresu URL na stronie select (wykonane w następnej sekcji). Identyfikator pola wyszukiwania jest przechowywany jako "s", który jest domyślnym polem używanym w polu wyszukiwania WordPress (byłoby to korzystne, ponieważ kontynuujemy tę koncepcję w celu opracowania wtyczki WordPress).
Stylistyka wyników jest łatwa: składa się z czystej struktury, która jest łatwa do ułożenia zgodnie z Twoim projektem.
.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img i .ac_results ul li a span
Ten podstawowy przykład wykorzystuje statyczne źródło danych, które jest prostym plikiem JavaScript, w którym zadeklarowaliśmy tablicę w formacie JSON. Cała nasza funkcjonalność polega na analizowaniu tablicy i wyświetlaniu wyników.
Nie martw się - to po prostu tablica z podstawowymi funkcjami pary klucza i wartości i nic więcej. Naszymi kluczami są permalink, który prowadzi nas do strony wyników, obrazu do podglądu i tytułu, w którym musimy przeszukać ciąg. Zachowałem domyślny obraz i przykładowy tytuł dla tego podstawowego demo.
Przykładowa struktura tablicowa
[{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }… Repeat as much as you want to]Obsługa JavaScript jest łatwa. Po prostu analizujemy wynikową macierz JSON w jQuery, formatujemy wyniki zgodnie z naszymi wymaganiami i przekazujemy ją.
Wskazówka dla programistów: Jeśli chcesz zmienić sposób wyświetlania wyników, spójrz na format funkcji () w skrypcie foxycomplete.js. Jest to funkcja JavaScript, która pobiera tablicę jako dane wejściowe i zwraca sformatowany kod HTML zawierający elementy tablicy. Bardzo proste do zrozumienia, ale jeśli chcesz to zmienić - zrób to tutaj!
FoxyComplete jako wtyczka WordPress (lokalna / dynamiczna)
Kliknij poniższe zdjęcie, aby pobrać wtyczkę WordPress jako plik .zip.
Dla projektantów
Mam nadzieję, że pamiętasz, że powiedziałem, że to powinno być bułka z masłem dla projektantów, dobrze, oto jest! FoxyComplete jako Plug-n-Play WordPress Plugin który działa od razu po wyjęciu z pudełka - wystarczy prosta konfiguracja do podstawowej implementacji. Wszystko, co musisz zrobić, to pobrać, zainstalować i bawić się podczas projektowania.
Opcje wtyczki są następujące:
Włącz wyszukiwanie lokalne: Po przejrzeniu kilku stron dowiedziałem się, że ich opcja wyszukiwania była niesamowicie szybka - nawet przy użyciu ogromnego przykładowego IMDB. Pierwszą rzeczą, która uderzyła, były ich zaawansowane, szybkie serwery - ale co z normalnymi użytkownikami, którzy dzielili się hostingiem i różnymi ilościami danych? Właśnie dlatego postanowiłem, że wyszukiwanie lokalne jest priorytetową opcją. Po prostu ładuje plik JavaScript w stopce twojej instalacji WordPressa zawierający tablicę do wszystkich twoich wpisów i stron wraz z ich adresami URL i, jeśli je znajdzie, podglądem obrazu. Wtyczka domyślnie korzysta z wyszukiwania dynamicznego, chociaż można ją w każdej chwili zmienić na wyszukiwanie lokalne.
Limit: Na pewno potrzebna byłaby kontrola limitu wyświetlanych wyników. Pomaga zachować spójność z projektem i pozwala użytkownikom uzyskać tylko najbardziej odpowiednie wyniki. Domyślnie jest pięć najlepszych trafnych wyników.
Szerokość autouzupełniania: początkowo zawsze była równa szerokości wejściowej, ale potem zdałam sobie sprawę, że nie szukamy w szerokim polu wyszukiwania w stylu Google. Domyślnie jest to szerokość elementu wejściowego, ale możesz ją zmienić w dowolnym momencie.
Identyfikator wejścia: ponieważ jest to wtyczka WordPress, nadałem preferencję "#s" jako domyślny wybór, który można zmienić na dowolny. Po prostu wprowadź ID (bez "#") żądanego elementu wejściowego i gotowe.
Domyślny obraz: Czasami wtyczka może nie znaleźć odpowiedniego obrazu, a do tego dodałem obraz demonstracyjny, ale masz nad nim kontrolę: po prostu zamień go na własny przykładowy obraz w katalogu wtyczek.
Wyszukiwanie dynamiczne wyszukuje inteligentnie odpowiednią zawartość i natychmiast dostarcza do niej dynamiczną macierz JSON. Najpierw zbiera wszystkie posty i strony w instalacji WordPress, które są publikowane i publiczne. Następnie przeszukuje obrazy w 3 krokach od treści:
- Przesyłanie multimediów
- Pole niestandardowe "Thumbnail"
- Obrazy w treści wpisu
Po zebraniu wszystkich danych łączy tytuł i odpowiednią treść każdego postu / strony i wyszukuje poszukiwany element w celu uzyskania kompleksowego wyszukiwania. Po znalezieniu, powiedzmy X liczba elementów - popycha tych X do tablicy JSON, która jest zwracana do funkcji JavaScript.
Dynamiczne vs lokalne funkcje
Jest to bardzo ważny temat i jestem otwarty na dyskusję w sekcji komentarzy. Osobiście uważam, że nie ma nic złego w podawaniu tych lokalnych źródeł, jeśli zwiększa to wrażenia w wielu fałdach. Innym powodem, dla którego zaimplementowałem wyszukiwanie lokalne, było to, że znalazłem nawet Google wdrażające je w Gmailu.
Gdy użytkownik się zaloguje, Gmail wysyła żądanie do swojego serwera i pobiera ze stopki wszystkie adresy e-mail oraz nazwy lub aliasy wszystkich kontaktów, które następnie są używane w polach autouzupełniania Do, DW, UDW i Etykiety. Co powiesz, legalne?
Wdrażanie FoxyComplete jako wyszukiwania podobnego do YouTube ze zdjęciami
Jak wspomniano powyżej, istnieje również wiele funkcji dla programistów. Powyżej wykorzystaliśmy kanały YouTube, a następnie przeanalizowaliśmy je w PHP, aby uzyskać wymagane wyniki w formacie JSON. Możesz się o nich dowiedzieć tutaj . Kliknij poniższy obraz, aby zobaczyć wersję demonstracyjną YouTube Foxycomplete.
Kolejną funkcjonalnością, którą możesz wykonać, jest wyszukiwarka YouTube z grą on-click w trybie modalnym lub nakładkowym. Na przykład po wyszukaniu filmu i kliknięciu go w wynikach autouzupełniania pojawia się modalne okno dialogowe lub nakładka z zawartym w nim filmem, odtwarzanym w witrynie, ale pochodzącym z YouTube. Fajnie, prawda?
Poprawa bezpieczeństwa
Chociaż wtyczka WordPress jest bezpieczna, tak jak ja WordPress Nounces , może być nawet bezpieczny dzięki zastosowaniu stałych w wersji dynamicznej i szyfrowaniu w lokalnym.
Jednym z zabezpieczeń, którego używaliśmy, było sprawdzenie połączenia Ajax, a następnie sprawdzenie połączenia Ajax z tej samej domeny, co pokazano poniżej.
//define SAME_DOMAIN to true in the Header of your document.define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');define('DOING_AJAX', true);if(IS_AJAX && DOING_AJAX && SAME_DOMAIN){//your search logic}To tylko jeden z wielu sposobów, aby to zabezpieczyć!
Wniosek
To był FoxyComplete, który może pomóc Ci w wielu projektach i projektach rozwojowych w przyszłości. To jest wersja 1.0, a ja postaram się ją dalej ulepszać dzięki cennym opiniom i wsparciu.
Daj mi znać, co myślisz w sekcji komentarzy poniżej, a ponieważ jest ona hostowana w środowisku, które mogę łatwo i regularnie edytować, z twoimi super sugestiami - pozwala to zrobić świetną darmową wtyczkę z najwyższą wygodą użytkownika na obu końcach.