Dla wielu ludzi skuteczność wyszukiwania informacji w Internecie to właśnie nogi, które karmią wilka. Gdzie mogę znaleźć aktualne i aktualne informacje? Gdzie kupić taniej i sprzedać drożej? Gdzie mogę znaleźć najbardziej dokładne instrukcje dotyczące wykonywania określonych zadań? Gdzie oglądać filmy online? Aby jak najdokładniej odpowiedzieć na te i podobne pytania użytkowników, wyszukiwarki z roku na rok udoskonalają już wyrafinowane mechanizmy prezentowania witryn w wynikach wyszukiwania na konkretne zapytania użytkowników. Celem wyszukiwarek jest przeniesienie ludzi na stronę o jak najwyższej jakości, w celu uzyskania odpowiedzi na zadawane pytania.

Oprócz wyszukiwarek, same wyszukiwarki są wyposażone w filtry wyszukiwania, dzięki czemu każdy użytkownik może zawęzić wyszukiwanie informacji lub zawęzić zapytanie.

Rozważ poniżej niektóre rozszerzenia wyszukiwania, które mogą uzupełniać popularne przeglądarki, a co za tym idzie, zwiększyć efektywność wyszukiwania informacji w Internecie.

Wyszukaj rozszerzenia dla Google Chrome

Przeszukaj bieżącą witrynę

Nie każda witryna jest wyposażona w wewnętrzną wyszukiwarkę, a na takich zasobach trzeba długo biegać od sekcji do sekcji w poszukiwaniu konkretnych informacji. Wbudowane rozszerzenie przeglądarki do wyszukiwania w witrynie to uniwersalne narzędzie, które będzie zawsze pod ręką, niezależnie od odwiedzanej witryny. Wszystko, co trzeba zrobić, aby znaleźć potrzebne informacje w witrynie, to wprowadzić słowo kluczowe w małym polu wyszukiwania, które pojawia się po kliknięciu przycisku rozszerzenia na pasku przeglądarki.

Wyniki wyszukiwania wyszukiwarki otworzą się w nowej karcie przeglądarki i wybiorą strony określonej witryny, w których znajduje się słowo kluczowe.

Wyszukiwanie w bieżącej witrynie realizowane jest za pomocą preinstalowanej wyszukiwarki Google, ale w parametrach rozszerzenia można zainstalować inną wyszukiwarkę - Yandex, Yahoo lub Bing. Aby to zrobić, wywołaj menu kontekstowe na przycisku rozszerzenia i wybierz polecenie „Parametry”.

Opcje rozszerzenia otworzą się w nowej zakładce przeglądarki, gdzie możemy wybrać inną wyszukiwarkę. A ona będzie już przeszukiwać witrynę.

Alternatywna wyszukiwarka Google

Wyszukiwarka Yandex początkowo zapewnia możliwość wyszukiwania informacji w dwóch innych wyszukiwarkach - Google i Bing - za pomocą jednego kliknięcia, chociaż linki prowadzące do tych wyszukiwarek wraz z wprowadzonym kluczowym zapytaniem znajdują się na samym dole strony wyników wyszukiwania.

Ale Google jest bardziej samolubny w tym względzie - w wynikach wyszukiwania nie ma wzmianki o konkurencyjnych wyszukiwarkach. Sytuację tę można naprawić, wdrażając rozszerzenie „Alternatywna wyszukiwarka Google” w przeglądarce Google Chrome.

Łatwiej jest zainstalować specjalne rozszerzenie do tego celu TMS (Torrents MultiSearch) niż ciągłe wpisywanie dodatku do słowa kluczowego „torrent”, aby uzyskać wyniki wyszukiwania dla trackerów torrentów.

Przycisk rozszerzenia jest osadzony na pasku narzędzi przeglądarki, a po jego kliknięciu otworzy się małe pole wyszukiwania, w którym można wpisać zapytanie.

Wyniki wyszukiwania pojawiają się w osobnej zakładce i będą to treści znalezione tylko w trackerach torrentów Runetu, a nie na stronach vareznik, portalach z oprogramowaniem i mediami lub na oficjalnych stronach.

W wynikach wyszukiwania dla trackerów torrentów znalezione treści można filtrować według rozmiaru pliku lub daty przesłania. W celu zawężenia wyszukiwania można określić dodatkowe słowa kluczowe.

Wyniki wyszukiwania można również wyświetlać oddzielnie dla określonych trackerów torrentów i osobno dla typów treści, takich jak filmy, muzyka, oprogramowanie.

Ponadto rozszerzenie TMS jest osadzone w menu kontekstowym przeglądarki, dzięki czemu możesz wysłać dowolne słowo lub frazę podświetlone na stronach w Internecie do wyszukiwania w trackerach torrentów bez zbędnego zamieszania przy kopiowaniu i wklejaniu.

Wyszukiwanie kontekstowe

W przeglądarce Google Chrome zaimplementowano funkcję wyszukiwania kontekstowego przy użyciu jednej wyszukiwarki zainstalowanej w domyślnej przeglądarce. Rozszerzenie „Wyszukiwanie kontekstowe” ma na celu zwiększenie liczby wyszukiwarek, których można użyć do wyszukiwania dowolnego wybranego słowa na stronach witryny.

Rozszerzenie początkowo ma możliwość przeszukiwania najpopularniejszego trackera torrentów RuTracker, Wikipedii i portalu medialnego Kinopoisk.Ru.

Inne wyszukiwarki, dzięki którym możliwe byłoby wyszukiwanie informacji bezpośrednio z menu kontekstowego przeglądarki, są dodawane w parametrach rozszerzenia. Otwórzmy menu Google Chrome, wybierzmy „Ustawienia” i przejdźmy do sekcji rozszerzeń zainstalowanych w przeglądarce.

Z listy rozszerzeń wybierz to, czego potrzebujemy - „Wyszukiwanie kontekstowe”. Kliknij link „Opcje”.

Wyszukaj rozszerzenia dla Opery

Szukaj w serwisie

Przycisk rozszerzenia znajduje się na pasku narzędzi przeglądarki i klikając go, możesz wywołać pole wyszukiwania, aby wpisać kluczowe zapytanie, a także zmienić wyszukiwarkę.

Wstępnie zainstalowane Yandex i Google w ustawieniach rozszerzenia można uzupełnić o inne wyszukiwarki. Wywołaj menu kontekstowe przycisku rozszerzenia i wybierz polecenie „Ustawienia”.

Podobnie jak w przypadku rozszerzenia „Contextual Search” do przeglądarki Google Chrome, aby dodać nową wyszukiwarkę, należy wpisać jej ciąg adresu URL.

Torrenty MultiSearch

Wyszukiwanie podobnych obrazów

Wyszukiwanie podobnych obrazów dodaje dodatkowe polecenie wyszukiwania podobnych obrazów za pomocą kilku wyszukiwarek do menu kontekstowego przeglądarki Opera.

Lub zostanie wyświetlona lista publikacji z podobnymi zdjęciami.

Wyszukaj rozszerzenia dla Mozilla Firefox

Wyszukiwanie w witrynie

Podobnie jak w poprzednich dwóch przypadkach, dla przeglądarki Mozilla Firefox istnieje specjalne rozszerzenie do wyszukiwania w dowolnej witrynie internetowej.

Jedynie w przypadku wyszukiwania strony Fire Fox osadza się w istniejącym polu wyszukiwania przeglądarki, dodając jej ikonę w postaci czerwonej lupy przed zwykłą ikoną wyszukiwania.

Zmiana domyślnej wyszukiwarki na zwykłe wyszukiwanie w Mozilla Firefox pociąga za sobą zarówno zmianę wyszukiwarki, jak i wyszukiwanie w witrynach.

Rozszerzenie Site Search integruje się z menu kontekstowym Mozilla Firefox i wybierając dowolne słowo, które pojawi się pod ręką, w poszczególnych wynikach wyszukiwania możesz zobaczyć wszystkie strony witryny, w których występuje to słowo.

Szukaj w byffox

Jakiekolwiek oprogramowanie o takich „jeszcze niedojrzałych” nazwach z reguły irytuje wielu użytkowników tym, że nie widzą oni nawet śladu przeznaczenia proponowanych narzędzi.

A co dokładnie oferuje „Softina from Vasya” czy „Repack od Petya”, trzeba się przekonać dopiero po dokładnym zapoznaniu się z opisem. Niemniej jednak za tak niepoważną nazwą, jak „Search from byffox”, kryje się użyteczna i sensowna funkcjonalność. To rozszerzenie umożliwia uzupełnienie menu kontekstowego przeglądarki o dodatkowe polecenie wyszukiwania dla wybranego słowa za pomocą różnych wyszukiwarek.

Ten post jest kontynuacją poprzedniego artykułu (tłumaczenie) „Szukaj bloga za pomocą Google AJAX Search API i jQuery”.
Po jej napisaniu zastanawiałem się, gdzie najlepiej byłoby umieścić taki formularz i dywan wyników, poza osobną stroną. Pomysł nie trwał długo: logiczne jest wypróbowanie wyszukiwania z wynikami w wyskakującym okienku.

Pierwszy próbny:

Wyszukiwarka blogów ↓

Jako podstawę do wyszukiwania wyskakującego okienka wybrałem wtyczkę modalną jQuery o nazwie Odsłonić ... Jest lekki, bez zbędnych elementów i bardzo łatwy do podłączenia.

Instalowanie Reveal.
Linki do skryptu i stylów znajdują się w sekcji szablonu:
Nie zapominaj, że w archiwum wtyczki znajduje się obrazek png, który musisz umieścić w swoim albumie picas i zapisać do niego ścieżkę w ujawnij.css.

Następnym krokiem jest zainicjowanie wtyczki ” strojenie" scenariusz (umieścić w tym samym miejscu):

Następnie definiujemy zawartość wyskakującego okienka (umieściliśmy to w treści postu):

Wyszukiwarka blogów ↓

tutaj wstawiamy wszystkie kody wyszukiwania z artykułu „Szukaj bloga za pomocą Google AJAX Search API i jQuery”.

Zgodnie z moim komentarzem w tym kodzie, skopiuj i wklej tam całą „wyszukiwarkę Google”, o którym teraz mówimy. W arkuszu stylów css będziesz musiał zwiększyć powierzchnię białego kwadratu.

Ostatnim krokiem jest ona sama łącze modalne, który może być zarówno tekstowy, jak i graficzny. Kod linku w postaci obrazka (także w treści postu):

Mieć Odsłonić, wtyczka modalna, istnieją dwa rodzaje animacji: fade and fadeAndPop, regulowana prędkość efektu: prędkość animacji: 300oraz możliwość zamknięcia całego okna poprzez kliknięcie w przyciemnione tło: closeonbackgroundclick: true.

Te ustawienia są zapisywane w skrypcie „konfiguracyjnym” (patrz wyżej):

$ ("# myModal"). ujawnij ((animation: "fadeAndPop", // fade, fadeAndPop, none animationspeed: 300, // jak szybko zamykają się animacjeonbackgroundclick: true, // jeśli klikniesz tło zamknie się modalnie? "close-odkryć-modalne" // klasa przycisku lub elementu, który zamknie otwarty modal));

Lub te opcje można połączyć za pośrednictwem połączyć do okna modalnego (patrz wyżej)

Należy rozumieć, że taki schemat z szukaj w osobnym oknie - czysty eksperyment i wymaga dokładniejszego dostosowania.

W tym samouczku utworzymy rozwijany formularz wyszukiwania, który idealnie pasuje do projektu interfejsu mobilnego. Do zaimplementowania elementu zostanie użyty tylko CSS - bez JavaScript ani dodatkowych znaczników. Prosty i skuteczny sposób na wdrożenie kompaktowego formularza wyszukiwania.

Spotkanie

Na urządzeniach mobilnych liczy się każdy piksel. Aby zminimalizować ilość miejsca wymaganego do wyświetlenia formularza, będzie on początkowo wyświetlany w zwartej formie i rozszerzany po otrzymaniu fokusa (: fokus). Takie podejście oszczędza miejsce na inne elementy interfejsu i zawartość.

Znaczniki HTML

Formularz wykorzystuje HTML5. Kod jest bardzo prosty:

Resetowanie domyślnego widoku formularza wyszukiwania w przeglądarkach Webkit

Domyślnie w przeglądarkach Webkit formularz wyszukiwania będzie wyglądał następująco:

Aby formularz wyszukiwania wyglądał jak zwykłe pole wprowadzania tekstu, musisz dodać następujące style:

Dane wejściowe (-webkit-look: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;) input :: - webkit-search-decoration, input :: - webkit- przycisk wyszukiwania-anulowania (wyświetlacz: brak;)

Tworzymy nasz formularz wyszukiwania

Pole wejściowe będzie miało standardową szerokość 55 pikseli i będzie rozszerzane do 130 pikseli w stanie: focus. Właściwość przejścia jest używana do animacji, a cień pola jest używany do efektu blasku.

Dane wejściowe (tło: #ededed url (img / search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; / * Domyślna szerokość * / -webkit- border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-przejście: wszystkie .5s; -moz-przejście: wszystkie .5s; przejście: wszystkie .5s;) input: focus ( width: 130px; / * Szerokość z fokusem * / background-color: #fff; border-color: # 6dcff6; -webkit-box-shadow: 0 0 5px rgba (109,207,246, .5); -moz-box- shadow: 0 0 5px rgba (109,207,246, .5); box-shadow: 0 0 5px rgba (109,207,246, .5); / * Efekt blasku * /)

Przykład B.

W przykładzie B formularz wyszukiwania jest znacznie zminimalizowany - wyświetlana jest tylko ikona bez wypełniania tekstu. Zwróć uwagę, że właściwości dopełnienia i szerokości pola wyszukiwania zmieniły się, tworząc okrągły przycisk. Aby tekst był niewidoczny, użyj właściwości color: transparent.

# wejście demo-b (szerokość: 15px; dopełnienie-lewo: 10px; kolor: przezroczysty; kursor: wskaźnik;) # wejście demo-b: hover (kolor tła: #fff;) # wejście-demo-b: ostrość (szerokość : 130px; padding-left: 32px; color: # 000; background-color: #fff; cursor: auto;)

Zgodność z przeglądarkami

Opisana metoda działa we wszystkich głównych przeglądarkach: Chrome, Firefox, Safari i IE8 +. W IE7 i starszych przeglądarkach funkcjonalność nie działa ze względu na brak wsparcia dla pseudoklasy: focus oraz typu pola wyszukiwania.

25 października 2019 r Wpis został zaktualizowany

Przesuwny formularz wyszukiwania w serwisie

Styl Flat zyskał dużą popularność w projektowaniu stron internetowych. W tej lekcji przyjrzymy się kolejnemu elementowi witryny, który jest wykonany w tym stylu. Ten element to formularz wyszukiwania. Ale nie jest to proste, ale formularz wyszukiwania, który pojawia się po kliknięciu i „zwija się”, jeśli nie jest używany. Jeśli chodzi o ikonę wyszukiwania, jest pobierana z pliku SVG i jest skalowalna w różnych rozdzielczościach ekranu (zarówno na urządzeniach mobilnych, jak i na dużych monitorach).

Przykład można zobaczyć tutaj:

Ściągnij

Wyciągany formularz wyszukiwania

Jak używać?

HTML

Najpierw zdefiniujmy znaczniki, które będą na stronie HTML:

1 2 3 4 5 6 7

<div id \u003d "sb-search" class \u003d "sb-search"\u003e <formularz\u003e <klasa wejściowa \u003d "sb-search-input" placeholder \u003d "Czego będzie szukać?" type \u003d "text" value \u003d "" name \u003d "search" id \u003d "search"\u003e <input class \u003d "sb-search-submit" type \u003d "submit" value \u003d ""\u003e <span class \u003d "sb-icon-search"\u003e </ formularz\u003e </ div\u003e

W formularzu wyszukiwania nie ma nic niezwykłego: pole tekstowe do wprowadzania danych, przycisk wyszukiwania i element dla ikony.

CSS

Teraz dodajmy trochę stylizacji, aby formularz wyszukiwania ładnie wyglądał na stronie.

Ponieważ pojawi się po kliknięciu, początkowo jest ukryty. Odbywa się to za pomocą właściwości przelewowyi jego znaczenie ukryty, w wyniku czego wszystko poza ikoną jest ukryte (w efekcie widzimy tylko ikonę, a pole tekstowe nie):

.sb-search (pozycja: względna; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transit: width 0,3s; -moz- przejście: szerokość 0,3 s; przejście: szerokość 0,3 s; -webkit-backface-visibility: ukryte;)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.sb-search-input (position: bezwzględna; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10 ; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: # 2c3e50;) input [type \u003d "search"] .sb-search-input (-webkit-patient: none; -webkit -border-radius: 0px;)

Określamy kolor tekstu, który znajduje się w tle zapytania (tekst, który wpisujemy podczas wyszukiwania):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.sb-search-input :: -webkit-input-placeholder (color: # efb480;) .sb-search-input: -moz-placeholder (color: # efb480;) .sb-search-input :: -moz- symbol zastępczy (kolor: # efb480;) .sb-search-input: -ms-input-placeholder (color: # efb480;)

Przycisk wyszukiwania znajduje się zawsze nad resztą bloków i elementów na stronie, więc ustawiamy dla niego dużą wartość z-index:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.sb-icon-search (color: #fff; background: # e67e22; z-index: 90; font-size: 22px; font-family: "icomoon"; speak: none; font-style: normal; font-weight : normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased;) .sb-icon-search: before (content: " \\ e000 "; }

Nie zapomnij również dołączyć specjalnych ikon (SVG). Aby wstawić ikonę do przycisku wyszukiwania:

1 2 3 4 5 6 7 8 9 10

@ font-face (rodzina czcionek: "icomoon"; src: url ( „../fonts/icomoon/icomoon.eot”); src: url ( „../fonts/icomoon/icomoon.eot?#iefix”) format („embedded-opentype”), url ( „../fonts/icomoon/icomoon.woff”) format ("woff"), url ( „../fonts/icomoon/icomoon.ttf”) format (skrypt „truetype”\u003e<script src \u003d "js / uisearch.js"\u003e <skrypt\u003e nowy UISearch (document.getElementById ("sb-search"));</ skrypt\u003e

Wynik

Ładny formularz wyszukiwania, który zajmuje bardzo mało miejsca w witrynie i pięknie się wyświetla po kliknięciu ikony wyszukiwania.

nazwa klucza parametru. W polu wyszukiwania najczęściej stosuje się „q” lub „tekst”. wartość klucza parametru. Najczęściej nie jest to wymagane. Użytkownik może zmienić go na swój własny tekst, jeśli nie określono atrybutów tylko do odczytu i wyłączone. zablokowana modyfikacja użytkownika zablokowany dostęp, modyfikacja użytkownika i transfer danych bieżącego pola parametrów nie może być pustym szablonem wejściowym jak w wyrażeniach regularnych JS, po których należy przesłać formularz minimalna liczba znaków wymaganych do przesłania formularza maksymalna liczba znaków, jaką użytkownik może wpisać długość pola w symbolach podpowiedź-symbol zastępczy podpowiedź po najechaniu na autouzupełnianie. Nowoczesne przeglądarki pokazują wcześniej wprowadzone wyszukiwania w bieżącej domenie. Możesz go wyłączyć lub sprecyzować. lista zalecanych zapytań sprawdzanie pisowni i gramatyki zaznaczenie pola (czyli okres między kliknięciem elementu a kliknięciem poza elementem) otrzymane podczas ładowania dokumentu

Usuń krzyżyk „Wyczyść” w polu wyszukiwania, usuwając wcześniej wpisany tekst

Jak działa formularz wyszukiwania w witrynie

Najprostszy kod HTML

Jeśli wpiszesz w pole „pytanie” i klikniesz przycisk „Znajdź”, adres strony zmieni się z „http: //site/2011/06/forma-poiska-po-saitu..html ? tekst \u003d pytanie »Tak jak to się dzieje po kliknięciu łącza. Po załadowaniu strony skrypt sprawdza obecność określonych parametrów w adresie URL i, jeśli zostanie znaleziony, generuje i wyświetla wyniki wyszukiwania w witrynie.

name \u003d "tekst">

Aby jednak przyspieszyć ładowanie dokumentu, skrypt przetwarzający żądanie z reguły umieszczany jest tylko na jednej stronie serwisu, do której nastąpi przejście, jeśli jego adres jest zapisany w atrybucie action: " http: // witryna / wyszukiwanie /? tekst \u003d pytanie ”.

action \u003d "http: // witryna / wyszukiwanie /">

Aby skrypt działał, mogą być wymagane dodatkowe parametry, które są określone w ... To pole nie jest wyświetlane.? searchid \u003d 808327& tekst \u003d pytanie ”.

Otwórz wynik formularza w nowej karcie, używając atrybutu target

target \u003d "_ blank">

Skąd wziąć skrypt wyszukiwania w witrynie

Możesz użyć

• oferowane przez specjalne serwisy Yandex i Google,
• osadzone w używanym systemie CMS (jeśli jest dostępny), na przykład w Bloggerze pod adresem „https: // site.ru/ search? q \u003d question ", gdzie„ site.ru ”jest zastępowane adresem Twojego bloga,
• rozwijany niezależnie, na przykład w PHP.

Najłatwiejszą opcją jest przekierowanie żądania Google:

Tekst na przycisku: „Szukaj”, „Szukaj”, „Znajdź”

Spośród słów zachęty „Znajdź” ma doskonałą formę i oznacza, że \u200b\u200bwynik wyszukiwania będzie koniecznie pozytywny.