How to write a search string in html. Search extensions for browsers. Remove the "Clear" cross in the search field, deleting the previously typed text
For many people, the effectiveness of searching for information on the Internet is the very legs that feed the wolf. Where can I find up-to-date and up-to-date information? Where to buy cheaper and sell more expensive? Where can I find the most accurate instructions for performing certain tasks? Where to watch movies online? In order to answer these and similar questions of users as correctly as possible, search engines from year to year improve the already sophisticated mechanisms for submitting sites in search results for specific user queries. The goal of search engines is to take people to the highest quality site possible to get answers to the questions asked.
In addition to search engines, the search engines themselves are equipped with search filters so that any user can narrow down the search for information or narrow down their request.
Consider below some of the search extensions that can complement popular browsers, and, as a result, increase the efficiency of information search on the Internet.
Search extensions for Google Chrome
Search the current site
Not every site is equipped with an internal search engine, and on such resources you have to run from section to section for a long time in search of specific information. The built-in browser extension for searching within the site is a universal tool that will always be at hand, no matter which site you visit. All that needs to be done to find the information you need inside a site is to enter a keyword in the small search field that appears when you click the extension button on the browser bar.
Search results of the search engine will open in a new browser tab, and they will select the pages of a specific site where the keyword is found.
Search the current site is implemented with a preinstalled Google search engine, but in the extension parameters, you can install another search engine - Yandex, Yahoo or Bing. To do this, call the context menu on the extension button and select the "Parameters" command.
The extension options will open in a new browser tab, where we can select a different search engine. And already she will search within the site.
Alternative Google search
The Yandex search engine initially provides for the ability to search for information in two other search engines - Google and Bing - with one click, although links to go to these search engines along with the entered key query are huddled at the very bottom of the search results page.
But Google is more selfish in this regard - there is no mention of competing search engines in its search results. This situation can be corrected by implementing the "Alternative Google Search" extension in Google Chrome.
It is easier to install a special extension for this purpose TMS (Torrents MultiSearch) than to constantly enter the appendix to the keyword "torrent" to get search results for torrent trackers.
The extension button is embedded in the browser toolbar, and when clicked, a small search field will open to enter your query.
Search results appear in a separate tab, and this will be content found only on torrent trackers of the Runet, and not on vareznik sites, software and media portals or official sites.
In the search results for torrent trackers, the found content can be filtered by file size or the date it was uploaded. Additional keywords can be specified to narrow the search.
Search results can also be viewed separately for specific torrent trackers and separately for content types such as movies, music, software.
In addition, the TMS extension is embedded in the browser's context menu so that you can send any word or phrase highlighted on pages on the Internet to the search on torrent trackers without unnecessary fuss with copying and pasting.
Contextual search
Google Chrome has implemented a contextual search function using a single search engine installed in the default browser. The "Contextual Search" extension is intended to increase the number of search engines that can be used to search for any selected word on site pages.
The extension initially has the ability to search the most popular torrent tracker RuTracker, Wikipedia and the media portal Kinopoisk.Ru.
Other search engines, so that through them it would be possible to search for information directly from the browser context menu, are added in the extension's parameters. Let's open the Google Chrome menu, select “Settings” and go to the section of extensions installed in the browser.
In the list of extensions, select what we need - "Context Search". Click on the "Options" link.
Search extensions for Opera
Search within the site
The extension button is located on the browser toolbar, and by clicking on it, you can call the search field for entering a key query, and also change the search engine.
The pre-installed Yandex and Google in the extension settings can be supplemented with other search engines. Call the context menu on the extension button and select the "Settings" command.
In the same way as in the case of the "Contextual Search" extension for Google Chrome, to add a new search engine, you must enter its URL string.
Torrents MultiSearch
Similar image search
Similar image search adds an additional command to search for similar images using several search engines to the Opera browser context menu.
Or a list of publications with similar pictures will be presented.
Search extensions for Mozilla Firefox
Site search
As in the previous two cases, a special extension for searching inside any site on the Internet exists for the Mozilla Firefox browser.
Only in the case of the Fire Fox site search is embedded in the existing search field of the browser, adding its icon in the form of a red magnifying glass in front of the normal search icon.
Changing the default search engine for regular search in Mozilla Firefox entails both a change of the search engine and for searching within sites.
The Site Search extension integrates into the Mozilla Firefox context menu, and by selecting any word that comes to hand, in individual search results you can see all the pages of the site where this word is present.
Search from byffox
Any software products with such “not yet matured” names, as a rule, annoy many users with the fact that they don’t even see a hint of the intended purpose of the proposed tools.
And what exactly is offered by "Softina from Vasya" or "Repack played from Petya", you have to find out only after a detailed acquaintance with the description. Nevertheless, behind such a frivolous name as "Search from byffox" is a useful and sensible functionality. This extension allows you to replenish the browser context menu with an additional search command for the selected word using various search engines.
This post is a continuation of the previous article (translation) "Search for a blog with the Google AJAX Search API and jQuery".
After writing it, I thought about where it would be most successful to place such a form and a carpet of results, except for a separate page. The idea was not long in coming: it is logical to try a search with results in a pop-up window.
First demo:
Blog Search ↓
As a foundation for the popup search, I chose a jQuery modal plugin called Reveal ... It is lightweight, without unnecessary elements and very easy to connect.Installing Reveal.
Links to the script and styles are written in the template section:
Do not forget that there is a png picture in the plugin archive, which you need to put in your picas album and write the path to it in reveal.css.
The next step is to initialize the plugin " tuning" script (put in the same place):
Then we define popup content (we put this in the body of the post):
Blog Search ↓
here we insert all the search codes from the article "Search for a blog using the Google AJAX Search API and jQuery".
According to my comment inside this code, copy and paste the whole "google search" there, which we are talking about now. In the css stylesheet, you will have to increase the area of \u200b\u200bthe white square.
And the last step is herself modal link, which can be both text and graphic. Link code in the form of a picture (also in the body of the post):
Have Reveal, modal plugin, there are two kinds of animation: fade and fadeAndPop, adjustable speed of the effect: animationspeed: 300, and the ability to close the entire window by clicking on the darkened background: closeonbackgroundclick: true.
These settings are written to the "configuration" script (see above):
$ ("# myModal"). reveal ((animation: "fadeAndPop", // fade, fadeAndPop, none animationspeed: 300, // how fast animtions are closeonbackgroundclick: true, // if you click background will modal close? dismissmodalclass: "close-reveal-modal" // the class of a button or element that will close an open modal));
Or, these options can be connected via link to a modal window (see above)
It should be understood that such a scheme with search in a separate window - pure experiment and requires more careful customization.
In this tutorial, we'll create a drop-down search form that fits perfectly into the mobile interface design. Only CSS will be used to implement the element - no JavaScript or additional markup. A simple and effective way to implement a compact search form.
Appointment
On mobile devices, every pixel is counted. To minimize the amount of space required for displaying the form, it will initially be shown in a compact form and expanded upon receiving input focus (: focus). This approach saves space for other interface elements and content.
HTML markup
The form uses HTML5. The code is very simple:
Resetting the default view for the search form in Webkit browsers
By default, in Webkit browsers, the search form will look like this:
To make the search form look like a regular text input field, add the following styles:
Input (-webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;) input :: - webkit-search-decoration, input :: - webkit- search-cancel-button (display: none;)
We form our search form
The input field will have a regular width of 55px and expand to 130px in the: focus state. The transition property is used for animation and the box-shadow is used for the glow effect.
Input (background: #ededed url (img / search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; / * Default width * / -webkit- border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;) input: focus ( width: 130px; / * Width with focus * / 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); / * Glow effect * /)
Example B
In example B, the search form is significantly minimized - only the icon is displayed without filling text. Note that the padding and width properties for the search box have changed to form a round button. To make the text invisible, use the color: transparent property.
# demo-b input (width: 15px; padding-left: 10px; color: transparent; cursor: pointer;) # demo-b input: hover (background-color: #fff;) # demo-b input: focus (width : 130px; padding-left: 32px; color: # 000; background-color: #fff; cursor: auto;)
Browser Compatibility
The described method works in all major browsers: Chrome, Firefox, Safari, and IE8 +. In IE7 and older browsers, the functionality does not work due to the lack of support for the: focus pseudo-class and the type of search field.
October 25, 2019 The entry has been updated
Sliding search form on the site
The Flat style has gained considerable popularity in website design. And in this lesson we will look at another element of the site, which is made in this style. This element is a search form. But not simple, but a search form that appears when clicked and "collapses" if not used. As for the search icon, it is taken from the SVG file and is scalable across different screen resolutions (both on mobile devices and on large monitors).
An example can be seen here:
Download
Pull-out search form
How to use?
Html
First, let's define the markup that will be on the HTML page:
| 1 2 3 4 5 6 7 | <div id \u003d "sb-search" class \u003d "sb-search"\u003e <form\u003e <input class \u003d "sb-search-input" placeholder \u003d "What will be looking for?" 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 </ form\u003e </ div\u003e |
There is nothing unusual in the search form: a text field for input, a search button and an element for the icon.
CSS
Now let's add some styling to make the search form look nice on the page.
Since it will appear when clicked, it is initially hidden. This is done using the property overflowand its meaning hidden, as a result of which everything outside the icon is hidden (as a result, we see only the icon, and the text field is not):
| .sb-search (position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz- transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden;) |
| 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: absolute; 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-appearance: none; -webkit -border-radius: 0px;) |
We determine the color of the text that is in the background of the request (the text that we enter during the search):
| 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- placeholder (color: # efb480;) .sb-search-input: -ms-input-placeholder (color: # efb480;) |
The search button is always above the rest of the blocks and elements on the page, so we set it a big value 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 "; } |
Also, do not forget to include special icons (SVG). To insert an icon in the search button:
| 1 2 3 4 5 6 7 8 9 10 | @ font-face (font-family: "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 ("truetype" script\u003e<script src \u003d "js / uisearch.js"\u003e <script\u003e new UISearch (document.getElementById ("sb-search"));</ script\u003e |
Conclusion
A nice search form that takes up very little space on the site and appears beautifully when you click on the search icon.
parameter key name. For the search field, "q" or "text" is most often used. parameter key value. Most often it is not asked. The user can change it to his own text if the readonly and disabled attributes are not specified. blocked user modification blocked access, user modification and data transfer of the current parameter field cannot be empty input template as in regular expressions JS, which must be followed to submit the form the minimum number of characters required to submit the form maximum number of characters that the user can type field length in symbols hint-placeholder tooltip on hover autocomplete. Modern browsers show previously entered searches on the current domain. You can turn it off or make it more specific. list of recommended queries spelling and grammar checked field focus (that is, the period between clicking on an element and clicking outside the element) received when loading a document
Remove the "Clear" cross in the search field, deleting the previously typed text
How the search form works on the site
The simplest HTML code
If you type in the “question” field and click on the “Find” button, the page address will change from “http: //site/2011/06/forma-poiska-po-saitu..html ? text \u003d question "As it happens when you click on a link. When the page is loaded, the script checks the presence of the specified parameters in the URL and, if found, generates and displays the search results on the site.
But in order to increase the speed of loading the document, the script that processes the request, as a rule, is placed on only one page of the site, to which the transition will be made, if its address is written in the action attribute: " http: // site / search /? text \u003d question ".
For the script to work, additional parameters may be required, which are specified in ... This field is not displayed.? searchid \u003d 808327& text \u003d question ".
Open the result of the form in a new tab using the target attribute
Where to get the site search script
You can use
- offered by special services of Yandex and Google,
- embedded in the used CMS (if available), for example, on Blogger at "https: // site.ru/ search? q \u003d question ", where" site.ru "is replaced with your blog address,
- developed independently, for example, in PHP.
The easiest option is to redirect the Google request:
Text on the button: "Search", "Search", "Find"
Of the prompting words "Find" has a perfect form and implies that the search result will necessarily be positive.
