info

SearchNow

Notes: SearchNow is a Javascript-based solution for displaying live search results on your site. It will display search results that are updated as the user types, and will be refined as they continue to type. It is loosely based on the LiveSearch technology, but has been expanded to handle paging results and some other new features.

Installation:
  1. Upload searchnow.js to your site and include this Javascript file on the page you want to have search results on.
  2. Add the needed HTML tags to the page you want to display search results on.
  3. Modify searchnow.php file to search and return desired results.
Setting up SearchNow Once you have the searchnow.js file uploaded and included on the page you wish to display search results on, you will need to add some HTML tags to the page to properly display the results. Next, you will need to upload the file searchnow.php to your site. The example below shows how to search a WordPress blog for posts containing the search term. You can modify this file to search for anything you want, as long as the results are still written out in a unordered list. Functions The only function you need to worry about is the call to 'initSearchNow(path)' in the body onLoad event. You must call the function with the path to the searchnow.php file, i.e. 'http://www.your-site.com', if the searchnow.php file is in the root folder. Styling the Results If you wish to style the results, you will need to add some classes to your CSS file. There is an example CSS file provided that should give you an idea where to begin, and the results are fully customizable to fit the design of your site. Links
  • Example of SearchNow in action
Release History
  • Oct 16, 2004: v1.1 - fixed bug that closed the results when clicking any result in the list
  • Oct 11, 2004: v1.0 - released to the wild

Notes:

SearchNow is a Javascript-based solution for displaying live search results on your site. It will display search results that are updated as the user types, and will be refined as they continue to type. It is loosely based on the LiveSearch technology, but has been expanded to handle paging results and some other new features.

Installation:

  1. Upload searchnow.js to your site and include this Javascript file on the page you want to have search results on.
  2. Add the needed HTML tags to the page you want to display search results on.
  3. Modify searchnow.php file to search and return desired results.

Setting up SearchNow

Once you have the searchnow.js file uploaded and included on the page you wish to display search results on, you will need to add some HTML tags to the page to properly display the results.

  1. <body onload="initSearchNow('http://path-to-your-site.com');">
  2.  
  3. <form name="frmSearch" method="get" action="http://path-to-your-site.com/">
  4. <input id="searchNowBox" name="s" type="text" /><br />
  5. <input id="searchNowSubmit" name="searchNowSubmit" type="submit" value="Search" />
  6. <div id="searchNowResults"></div>
  7. </form>

Next, you will need to upload the file searchnow.php to your site. The example below shows how to search a WordPress blog for posts containing the search term. You can modify this file to search for anything you want, as long as the results are still written out in a unordered list.
  1. <?php
  2. header("Content-type: text/xml");
  3. include("wp-config.php");
  4.  
  5. $results = false;
  6. $wildcard = "%";
  7. $search_term = "";
  8.  
  9. if (ISSET($_GET["s"]))
  10. $search_term = $_GET["s"];
  11.  
  12. echo "<ul>";
  13. if ($search_term != "") {
  14. $posts = $wpdb->get_results("SELECT ID, post_title FROM $wpdb->posts WHERE post_title LIKE '$wildcard".$search_term."$wildcard' OR post_content LIKE '$wildcard".$search_term."$wildcard' ORDER BY RAND()");
  15. if ($posts) {
  16. $results = true;
  17. foreach($posts as $post)
  18. echo "<li>&gt; <a href=\"".get_permalink($post->ID)."\" title=\"$post->post_title\">$post->post_title</a></li>";
  19. }
  20. }
  21.  
  22. if (!$results)
  23. echo "<li>No results found for search '$search_term'</li>";
  24.  
  25. echo "</ul>";
  26. ?>

Functions

The only function you need to worry about is the call to ‘initSearchNow(path)’ in the body onLoad event. You must call the function with the path to the searchnow.php file, i.e. ‘http://www.your-site.com’, if the searchnow.php file is in the root folder.

Styling the Results

If you wish to style the results, you will need to add some classes to your CSS file. There is an example CSS file provided that should give you an idea where to begin, and the results are fully customizable to fit the design of your site.

Links

  • Example of SearchNow in action

Release History

  • Oct 16, 2004: v1.1 - fixed bug that closed the results when clicking any result in the list
  • Oct 11, 2004: v1.0 - released to the wild