实时搜索con ajax y php

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实时搜索con ajax y php相关的知识，希望对你有一定的参考价值。

  1. HOWTO: Animated Live Search
  2.  
  3. February 16th, 2006
  4.  
  5. I’ve been meaning for some time to give a little tutorial on the live search I created for this latest design. There are a few steps involved, and I’ll do my best to explain each as we go. I should also note that I’m not including all the effects that you’ll find in my search. They require some special WordPress template changes that you shouln’t have to make. And I need to keep mine unique, right? Also, I’ll be touching on a few steps that are WordPress specific, but the theory can be applied to any site platform.
  6. Setting Up the Results
  7.  
  8. The first thing we need to do is configure our WordPress theme to give the search results in the minimized fashion required by the javascript request. We don’t want to get the entire search results page, just the headings and list items containing said results. This is a pretty simple process. Just open the index.php file in your template folder, and place the following code at the top of the page:
  9.  
  10.     <?php if (isset($_GET['ajax']) && $_GET['s']) { ?>
  11.         <?php
  12.         // You might want to show fewer results than the standard per-page number
  13.         $max_results = 6; 
  14.         ?>
  15.         <h3>Search Results</h3>
  16.         <?php if (have_posts()) : $i = 0; ?>
  17.         <ul>
  18.             <?php while (have_posts()) : the_post(); $i++; ?>
  19.             <li><a href="<?php the_permalink() ?>" rel="bookmark" 
  20.                   title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
  21.  
  22.                 <?php if ($i == $max_results) break; ?>
  23.             <?php endwhile; ?>
  24.                 <li class="more"><a href="/?s=<?php echo urlencode($_GET['s']); ?>">Get More 
  25.                       Details in the Full View</a></li>
  26.             </ul>
  27.  
  28.         <?php else : ?>
  29.         <p>Sorry, nothing matched your search.</p>
  30.         <p> </p>
  31.         <?php endif; ?>
  32.  
  33.     <?php } else { ?>
  34.  
  35. ... and then this at the bottom to complete the if statement…
  36.  
  37.     <?php } ?> 
  38.  
  39. I’ve removed a few non-critical pieces of the Xhtml I use in my template for simplification, but feel free to edit the XHTML to your liking.
  40.  
  41. Once this is in place, you should be able to go http://www.yourdomain.com/?s=searchterm (replace www.yourdomain.com with your website URL, and searchterm with a relevant search term for your content). This should return a normal search results page. Now, simply add &ajax to the end of that url, and you should get your custom results for your search form. See, not that bad.
  42. The Form Itself
  43.  
  44. Now that we have our libraries in place, we need to add the XHTML for the search form.
  45.  
  46.     <form method="get" id="searchform" action="/">
  47.         <input type="text" value="" name="s" id="s" />
  48.         <input type="submit" value="Find It" class="submit" 
  49.             id="searchbutton" value="Search" />
  50.     </form>
  51.     <div id="search-results"></div>
  52.  
  53. We want the form to degrade gracefully if the user does not have JavaScript enabled, so you will notice it’s simply a standard form with our search page as the action. We will overwrite this functionality on page load with JavaScript.
  54. Onto the JavaScript
  55.  
  56. First, we’ll need to get the relevant JS libraries. I’ve used Prototype and scriptaculous for my site, but you could modify the code to use the lighter moo.fx library if your really concerned about page weight. Because javascript files are cached, I don’t worry about it that much. So sue me.
  57.  
  58. The prototype library is included in the latest release of scriptaculous available from the downloads page on the script.aculo.us site.
  59.  
  60. Once you have downloaded and extracted the files from the archive, I recommend placing the /lib/prototype.js file and all the files located in the /src/ folder into a /js folder at the root of your site. Then, in the header.php file in your template folder (or wherever you specify the <head> section of your site), include the following lines:
  61.  
  62.     <script src="/js/prototype.js" type="text/javascript" language="javascript"></script>
  63.     <script src="/js/scriptaculous.js" type="text/javascript" language="javascript"></script>
  64.  
  65. Sidenote: Because we won’t use the functions in a few files that are included into scriptaculous, you can cut down a little bit of page weight by either commenting out or removing the references to dragdrop.js, controls.js, and slider.js from the scriptaculous.js file (see my scriptaculous.js file for an example). If you plan to use these the functions in these files elsewhere on your site, you would obviously need to leave them intact.
  66.  
  67. Next I created a blank general.js file, placed it in the /js file in my site root, and included it below our other script includes with the following line:
  68.  
  69.     <script src="/js/general.js" type="text/javascript" language="javascript"></script> 
  70.  
  71. Now, we fill general.js with this code:
  72.  
  73.     function activateSearch() {
  74.         if ($('searchform')) {
  75.             $('s').value = 'Start Your Search...'; // Default text in the search box
  76.             var o = document.createElement('div'); // Old search results div
  77.             var n = document.createElement('div'); // New search results div
  78.             $('searchform').onsubmit = function() { doSearch();return false; };
  79.             $('s').onfocus = focusS; // Function to clear the default search box text on focus
  80.             var s = $('search-results');
  81.             var f = $('searchform');
  82.             o.id = 'old-search-results';
  83.             n.id = 'current-search-results';
  84.             s.appendChild(n);
  85.             s.appendChild(o);
  86.             o.style.display = 'none';
  87.             n.style.display = 'none';
  88.             is_searching = false;
  89.         }
  90.     }
  91.  
  92.     function doSearch() {
  93.         // If we're already loading, don't do anything
  94.         if (is_searching) return false; 
  95.         s = $F('s');
  96.         // Same if the search is blank
  97.         if (s == '' || s == 'Start Your Search...') return false; 
  98.         is_searching = true;
  99.         c = $('current-search-results');
  100.         o = $('old-search-results');
  101.         b = $('searchbutton');
  102.         b.value = 'Loading';
  103.         b.disabled = true;
  104.         o.innerHTML = c.innerHTML;
  105.         c.style.display = 'none';
  106.         o.style.display = 'block';
  107.         // Setup the parameters and make the ajax call
  108.         pars = 's=' + escape(s) + '&ajax';
  109.         var myAjax = new Ajax.Request('http://www.yourdomain.com/', 
  110.               {method: 'get', parameters: pars, onComplete:doSearchResponse});
  111.     }
  112.  
  113.     function doSearchResponse(response) {
  114.         $('current-search-results').innerHTML = response.responseText;
  115.         new Effect.BlindUp('old-search-results',{duration:.8});
  116.         new Effect.BlindDown('current-search-results',{duration:.8, afterFinish:resetForm});
  117.     }
  118.  
  119.     function resetForm() {
  120.         s = $('searchbutton');
  121.         s.value = 'Find It';
  122.         s.disabled = false;
  123.         is_searching = false;
  124.     }
  125.  
  126.     function focusS() {
  127.         if ($F('s') == 'Start Your Search...') $('s').value = '';
  128.     }
  129.  
  130.     Event.observe(window, 'load', activateSearch, false);
  131.  
  132. Be sure to change the www.yourdomain.com to your website url. Rather than explain the code line-by-line, I’ll give you a general overview of what happens.
  133.  
  134. First, the Event.observe at the bottom of the file will run the activateSearch function once the page loads. This function will check for the search form and if it exists, set the default text in the search box, creates the <div> elements for the current and old search results, sets the submit action to the doSearch function, sets the onFocus action for the search box to delete the default text when the element is focused, and sets a few variables. Whew.
  135.  
  136. Ok, so when somebody submits the form, it calls the doSearch function. This verifies that there’s something in the search box and checks to see if we’re already searching. If everything checks out, it takes whatever is in the current-search-results div (if this is the first search, it will be empty) and puts it in the old-search-results div. Then it swaps the visibility of the old-search-results and the current-search-results immediately after, making the switch transparent to the user. This sets the stage for the animation once the search results are returned. Next it sets the button text to ‘Loading’ and disables it. Finally, it sets the url and parameters for the ajax call, and specifies the doSearchResponse function to run when the results are returned.
  137.  
  138. The doSearchResponse is passed a variable we store as response, and the html of the results is found at response.responseText. We take that code and place it in the now-hidden current-search-results div and animate our current-search-results to roll in while the old-search-results rolls out. Once those effects are finished, we set the button back to normal and tell js that we’re done searching, and we’re finished.
  139.  
  140. All that’s left to do is style your results with a little css.

以上是关于实时搜索con ajax y php的主要内容，如果未能解决你的问题，请参考以下文章

PHP 实例 - AJAX 实时搜索

PHP 实例 - AJAX 实时搜索

PHP/AJAx 实时搜索的最佳方法 - xml 还是 MySQL？ [关闭]

Ajax PHP 实时搜索 - 需要第二步

PHP Ajax 实时搜索只返回一个结果

实时数据搜索问题，如何通知用户在搜索中更具体