SHARE
TWEET

custom-auto-suggest

5ally Mar 1st, 2018 (edited) 45 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*!
  2.  * Custom auto-suggestions scripts.
  3.  * Info: https://stackoverflow.com/q/49040586/9217760
  4.  *
  5.  * Originally for http://temp4.dotdevelopment.net/
  6.  * Created by Sally on Mar 02 2018 GMT +8.
  7.  * Modified by Sally on Mar 02 2018 GMT +8.
  8.  */
  9.  
  10. /**
  11.  * @param query  string The search query.
  12.  * @param cat_id int    The category ID.
  13.  * @return object The jqXHR object.
  14.  */
  15. function listingsLiveSearch( query, cat_id ) {
  16.     var jq = jQuery.noConflict(),
  17.         $result = jq( '#livesearch' ),
  18.         search_urls, url;
  19.  
  20.     $result.hide(); // Always hides it.
  21.  
  22.     // Search query is empty. Let's halt.
  23.     if ( '' === jq.trim( query ) ) {
  24.         $result.empty()
  25.             .css( 'border', 'none' );
  26.         return;
  27.     }
  28.  
  29.     // Define the different search URLs.
  30.     /*
  31.      * These URLs are relative to the page and not the location of this file.
  32.      * Unless you use full absolute URLs (e.g. http://example.com/file.php).
  33.      */
  34.     search_urls = {
  35.         // Format: {CATEGORY_ID}: '{SEARCH_URL}' - no comma at the end for the
  36.         // last item.
  37.         88: 'livesearch_Doctor.php',   // Doctors
  38.         89: 'livesearch_Lawyer.php',   // Lawyers
  39.         90: 'livesearch_Realtor.php',  // Realtors
  40.         91: 'livesearch_Mortgage.php', // Mortgages
  41.         0: 'livesearch.php'            // All other categories.
  42.     };
  43.  
  44.     // Set the appropriate search URL.
  45.     url = search_urls[ cat_id ] || search_urls[0];
  46.  
  47.     // Run AJAX and do the auto-suggesting.
  48.     return jq.get( url + '?q=' + query, function( s ) {
  49.         var $tmp = jq( '<div>' + s + '</div>' ), // Temporary DIV.
  50.             html = '';
  51.  
  52.         $tmp.find( 'a' ).each( function() {
  53.             html += '<div class="ac-item">' + jq( this ).text() + '</div>';
  54.         } );
  55.  
  56.         $result.css( 'border', '1px solid #A5ACB2' )
  57.             .html( html || s )
  58.             .show();
  59.     } );
  60. }
  61.  
  62. jQuery( function( $ ) {
  63.     var _query, _cat_id,
  64.         _show_LS = true,
  65.         _close_LS = true;
  66.  
  67.     // If the elements don't exist, exit this function.
  68.     if ( $( '#search_keywords' ).size() < 1 ||
  69.     $( '#search_categories' ).size() < 1 ) {
  70.         return;
  71.     }
  72.  
  73.     function _runAutoSuggest( q ) {
  74.         var query = q || $( '#search_keywords' ).val(),
  75.             cat_id = $( '#search_categories' ).val();
  76.  
  77.         if ( query !== _query || cat_id !== _cat_id ) {
  78.             listingsLiveSearch( query, cat_id );
  79.  
  80.             _show_LS = true;
  81.         }
  82.  
  83.         _query = query;
  84.         _cat_id = cat_id;
  85.     }
  86.  
  87.     // When user types a valid keyword or text.
  88.     $( '#search_keywords' ).on( 'keyup', function( e ) {
  89.         var value = $( this ).val();
  90.         if ( value && e.char ) {
  91.             _runAutoSuggest( value );
  92.         }
  93.     } );
  94.  
  95.     // Handles first-time focus including click.
  96.     $( '#search_keywords' ).one( 'focus', function() {
  97.         var value = $( this ).val();
  98.         if ( value ) {
  99.             _runAutoSuggest( value );
  100.         }
  101.     } );
  102.  
  103.     $( '<div id="livesearch" style="display: none;"></div>' )
  104.         .insertAfter( '#search_keywords' );
  105.  
  106.     // When a auto-suggest result is "selected".
  107.     $( '#livesearch' ).on( 'click', '.ac-item', function() {
  108.         $( this ).siblings().removeClass( 'active' );
  109.         $( this ).addClass( 'active' );
  110.  
  111.         // Updates the value of the search keyword field.
  112.         $( '#search_keywords' ).val( $( this ).text() );
  113.  
  114.         // Hides the auto-suggest results.
  115.         $( '#livesearch' ).hide();
  116.     } );
  117.  
  118.     // When the search keyword field is focused.
  119.     $( '#search_keywords' ).on( 'focus', function() {
  120.         if ( _show_LS && ! $( '#livesearch' ).is( ':empty' ) ) {
  121.             $( '#livesearch' ).show();
  122.         }
  123.     } );
  124.  
  125.     // When a different/new category is selected.
  126.     $( '#search_categories' ).on( 'change', function() {
  127.         var _ok = ( this.value === _cat_id ),
  128.             $divs = $( '.ac-item', '#livesearch' );
  129.  
  130.         if ( _ok ) {
  131.             $( '#search_keywords' ).val( $divs.filter( '.active' ).text() );
  132.             $divs.show();
  133.         } else {
  134.             $( '#search_keywords' ).val( '' );
  135.             $divs.hide();
  136.         }
  137.  
  138.         _show_LS = _ok;
  139.     } );
  140.  
  141.  
  142.     // The following are used for closing the auto-suggest results box when clicking on
  143.     // the page, or when the Esc key is pressed.
  144.  
  145.     $( '#search_keywords, #livesearch' ).on( 'mouseover', function() {
  146.         _close_LS = false;
  147.     } ).on( 'mouseleave', function() {
  148.         _close_LS = true;
  149.     } );
  150.  
  151.     $ ( document ).on( 'click', function() {
  152.         if ( _close_LS ) {
  153.             $( '#livesearch' ).hide();
  154.         }
  155.     } ).on( 'keydown', function( e ) {
  156.         if ( 27 === e.keyCode && _close_LS ) {
  157.             $( '#livesearch' ).hide();
  158.         }
  159.     } );
  160. } );
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top