can you make a tutorial for the search bar in the page pack #2? thanks!
of course! this code is used in my about, faq and tags page (click to preview).
difficulty: intermediate
tutorial under the read more..
so this is a code i created using this plugin by Johann Burkard (credits are in the code). the first thing you’ll need to do is to have the source code for jquery. so paste this somewhere between and (i like to place my codes right before but thats a personal choice):
after that, go down to and then go to wherever you want to put the search bar and paste this code:
No results found. Try again?
when this is done, go back to and find where you pasted the jquery source code from above. right underneath that, paste this code.
*** IMPORTANT *** right after you paste this code, go to the three places indicated in the picture below where it says .content and replace it with the name of the div that you want to search through. if you want the search box to search for the text throughout the WHOLE page, replace .content with body. if you want it to only search throughout a SPECIFIC div, replace .content with the id or class of the div. (ex. #posts, #entries, .container, etc)
Now, lets start the styling. find and right above that, paste this:
so, the first class is the class .noresult. this is the text that shows up when the search query can’t be found. for example if somebody searched for a random string of letters, such as “fnhrfbrhbjjbfrfbhrhbvh” and it wasnt found in the text, the div .noresult would show up. The default text is “No results found. Try again?” but if you want you can easily change it. you can style this text any way you want using the css above ^^
the next class is #searchfor which is the div for the search box itself. I already have the default as border:0px; but of course you can change it and style the search box the way you would any other element.
the input:focus just makes sure that when the search box is clicked, there is no glowing border/outline (which happens to be the default for most search boxes on chrome)
this is the most important class, .highlight. this styles the text that has been found by the search bar. the default is to make the background yellow like a highlighter (as indicated above) but you could literally do anything with it, such as change the font size, the color, make it bold/italicized/underlined etc. you can style this any way you choose to.
by now, if you’ve completed all these steps correctly your search box should be working! if there are any questions or if I made any mistakes please be sure to message me about it!
*** EXTRAS: if anyone is interested in seeing the explanations for the code, i made a version of it where each line was explained. Enjoy!
