Web Development

How to implement search functions without third-party apps

Ryan Boudreaux responds to a reader question about implementing search functionality without relying on third-party applications. Here is one example of how to do it.
A recent tutorial piece that was published on creating a web design layout in Photoshop received several comments, including one in particular from TR member lastchip, who asked about search functionality and implementations that do not rely on third-party applications. In this post, I will present ways to actively incorporate search code without using outside resources.

Each web programming language has its own particular nuances and ways of using search; for example, a simple <form> submit for a search functionality is all you need. Of course, it is making a call to the backend database to find any keywords or terms that match those found in the records, and linking them to associated posts in the blog data. The PHP instance utilized in one of my WordPress blogs makes use of the get method form (search_form.php) and the results are then displayed on a new page using the search results (search_results.php).

The associated styles have been omitted from the text of this piece to concentrate on the pure search code. The figure examples are shown with styling applied as displayed in Google Chrome, and a download is available at the bottom of this piece which includes the styling; however, this is just an example. The search form code would need to be applied to the header.php, and the search results file would need to be added to the active template folder of any WordPress installation to actually run a valid search.

Search Form Code (search_form.php) uses the "get" method with the php bloginfo ‘home' action to perform the search on the inputted value.
<form method="get" id="search_form" action="<?php bloginfo('home'); ?>/">
       <input type="text" class="search_input" value="Search..." name="s" id="s" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
       <input type="hidden" id="searchsubmit" value="Search" />
</form>
Here is the above code as displayed in Google Chrome in Figure A:

Search Results Code (search_results.php)
<?php get_header(); ?>
       <div id="content_box">
             <?php include (TEMPLATEPATH . '/l_sidebar.php'); ?>
             <div id="content" class="posts">
             <?php if (have_posts()) : ?>
                    <h2 class="archive_head">Your search for <span class="green"><?php echo $s; ?></span><br /> has the following results:</h2>
                    <?php while (have_posts()) : the_post(); ?>
                    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                    <h4><?php the_time('F jS, Y') ?><!-- by <?php the_author() ?> --> &middot; <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></h4>
                    <div class="entry">
                           <?php the_excerpt() ?>
                           <p><a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" title="Read the rest of this entry">[Read more &rarr;]</a></p>
                    </div>
                    <p class="tagged"><strong>Tags:</strong> <?php the_category(' &middot; ') ?></p>
                    <div class="clear"></div>
                    <?php endwhile; ?>
                    <?php include (TEMPLATEPATH . '/navigation.php'); ?>
             <?php else : ?>
                    <h2 class="page_header">The search couldn't find that, we welcome you to please try again?</h2>
                    <div class="entry">
                           <?php include (TEMPLATEPATH . '/searchform.php'); ?>
                    </div>
             <?php endif; ?>
             </div>
             <?php include (TEMPLATEPATH . '/r_sidebar.php'); ?>
       </div>
<?php get_footer(); ?>
Figure B is the results page as displayed in Google Chrome:

Again, this is just one example of an internal search function implementation utilized within a WordPress blog. This example code will not actually work until it is utilized on a server implementation running with PHP and a MySQL database backend. The sample PHP code along with the styling is available for download.

If you are looking for some inspiration with CSS3 styling of a search form, check out this quick tutorial and demo from Web Designer Wall entitled "Beautiful CSS3 Search Form."

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

6 comments
lastchip
lastchip

Thank you for keeping your promise Ryan, but it wasn't actually what I was asking. What I'm trying to find out, is if it is possible to incorporate search into a conventional website; in other words, without a database back-end and without using third party applications such as Google. When you published your simple website design, it incorporated a search box. Nothing was mentioned about it being coded via a database. I assumed therefore, you were offering search on a simple website. Your reply here is essentially using a third party application - Wordpress and using php calls to the database. I know that can be done (easily) and is done on many millions of sites across the world, but sadly, it doesn't answer my question.

johno
johno

I agree with btsbits... very misleading article, wordpress has a more detailed website you know...

btsbits
btsbits

I havent seen anything this disappointing in a long time. You are telling us about the front end to WordPress's search, and nothing about "search functions without third-party apps". This articles should of simply said "Look a WordPress's search, it's neat! (EOF) ". Regarding the 'take away' "...Here is one example of how to do it." should be changed to "Here is one example of something that has done it". I signed up for these news letters to get useful information, not junk mail. If i don't start getting some useful information from this site soon, I'll be sure to mark it as "spam" in gmail. I'd rather you waste cpu time sending it than to have me unsubscribe.

btsbits
btsbits

Php and other server side scripting languages/programs can do this fairly easily. It cannot be done in HTML since it is on the client side. As stated in the author's post below, it can be slow without a database backend, but on a small site, that's a relative term. If you have 50 typical html files to parse, I imagine even a shared host under a large load should be able to complete the request in under a second.

RJBoudreaux
RJBoudreaux

Search functions for websites typically require a database at the back end. There have been some folks who have implemented simple search functions that run a loop checking procedure against any files/keywords that match the search term. These implementations are quite slow, unreliable, and tend to bog down or even crash. Another option would be to use a desktop application (but, then again, that would be another 3rd party app) which could run an offline indexing of the entire site, then you could upload it as a "search engine" using it's own database as a resource. But, anytime you update the site, you would have to run the indexing app again, and upload again! See where I am getting? A search function without a database is archaic and outdated. The WordPress example code was presented because with some tweaking it can be implemented on any PHP driven website that is configured appropriately, and has a MySQL or other database back end. When you mentioned "third-party" I was reminded of the "Google Search Appliance" which has an associated cost, or other applications which can be purchased or licensed for use.

lastchip
lastchip

That confirms what I suspected, that search isn't really a viable option except via a database back-end.