Method using a simple jQuery solution
Not posted one of these for a while, but I was asked recently if there was a way to include a search on a WordPress page which was essentially a very long list of links to 3rd party data.
The functionality needed to allow the following:
- only searches for text matches on the page it’s embedded
- case insensitive
- inexpensive i.e. fast to implement / low dev’ time
Now the native WordPress search is good, but relatively basic, and by default it will return results from all pages / posts so this was no good here.
So, like most people, I had a quick look for an out-of-the-box solution, but nothing stood out. Most solutions were extensions of the WordPress search or alternatives. Generally they were far too complicated and code heavy for what was a very simple requirement. Instead I thought it’s got to be quicker and easier to code using jQuery which is already a WordPress component.
Here’s how I did it:
Example: Enter a Search Term below
Sample Search Links & Results
The JavaScript
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(".on-page-search").on("keyup", function () {
var v = $(this).val();
$(".results").removeClass("results");
$("a.demo-links").each(function () {
if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1) {
$(this).addClass("results");
}
});
});
}); </script>
The HTML
<input class="on-page-search"></input>
The CSS
/* Style the input */
.on-page-search {
width: 100%;
font-size: 14px;
line-height: 26px;
color: #787d85;
background-color: #fcfcfc;
border: 1px solid #e0e1e1;
padding: 5px 15px;
}
/* Style the list */
.demo-links {
border-bottom: none;
padding: 5px 5px;
line-height: 36px;
}
/* Style the results */
.results {
background: #de1919;
color: white;
}
.results:hover {
background: #333;
color: white;
}
Usage notes
This is pretty straightforward really. What we’re doing is:
- Adding an html input and styling it
- Creating a set of searchable results, in this case I gave the links the class
.demo-links - Creating a jQuery script to check each time after a key is released if there is a match using the
"keyup"function - Using the query to add a class, in this case
.resultsto the matched term using the"addClass"function - Styling the results to stand out clearly
- Restricting the search to target only those links required (instead of the whole page) by targeting
a.demo-links
Extending this
Things you could do differently or to extend this:
I’m targeting links, but you could highlight say whole paragraphs, just the matching text or any other element, by changing this line:
$("a.demo-links").each(function () {
You could add animations / transformations to really make the results pop – the sky’s the limit really.
Also you could also consider hiding non-matched results by extending the jQuery. I’ve added another example of this here: https://jsfiddle.net/u85gf30q/
Please note you’ll need to wrap that in script tags and add the jQuery(document) ready.function as per the following code to get it to work in WordPress.
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(".on-page-search").on("keyup", function () {
var v = $(this).val();
$(".results").removeClass("results");
$(".noresults").removeClass("noresults");
$("a.demo-links").each(function ()
{ if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1) {
$(this).addClass("results"); } else if (v != "" && $(this).text().search(v) != 1) {
$(this).addClass("noresults");
}
});
});
}); </script>
Also add this to your CSS:
.noresults {
color:#f3f4f5;
}
Conclusion
Overall this took me about 30-40 minutes (this write-up took far longer) and ticked the functionality boxes as required. I think it could be pretty useful for FAQ sections or other list or data applications where it’s hard for the user to find something.
If you found this in any way useful, please take a moment to read and click on one of the sponsored messages 🙂
Comments, improvements or questions are welcome.
