custom-auto-suggest

/*!
 * Custom auto-suggestions scripts.
 * Info: https://stackoverflow.com/q/49040586/9217760
 *
 * Originally for http://temp4.dotdevelopment.net/
 * Created by Sally on Mar 02 2018 GMT +8.
 * Modified by Sally on Mar 02 2018 GMT +8.
 */

/**
 * @param query  string The search query.
 * @param cat_id int    The category ID.
 * @return object The jqXHR object.
 */
function listingsLiveSearch( query, cat_id ) {
    var jq = jQuery.noConflict(),
        $result = jq( '#livesearch' ),
        search_urls, url;

    $result.hide(); // Always hides it.

    // Search query is empty. Let's halt.
    if ( '' === jq.trim( query ) ) {
        $result.empty()
            .css( 'border', 'none' );
        return;
    }

    // Define the different search URLs.
    /*
     * These URLs are relative to the page and not the location of this file.
     * Unless you use full absolute URLs (e.g. http://example.com/file.php).
     */
    search_urls = {
        // Format: {CATEGORY_ID}: '{SEARCH_URL}' - no comma at the end for the
        // last item.
        88: 'livesearch_Doctor.php',   // Doctors
        89: 'livesearch_Lawyer.php',   // Lawyers
        90: 'livesearch_Realtor.php',  // Realtors
        91: 'livesearch_Mortgage.php', // Mortgages
        0: 'livesearch.php'            // All other categories.
    };

    // Set the appropriate search URL.
    url = search_urls[ cat_id ] || search_urls[0];

    // Run AJAX and do the auto-suggesting.
    return jq.get( url + '?q=' + query, function( s ) {
        var $tmp = jq( '<div>' + s + '</div>' ), // Temporary DIV.
            html = '';

        $tmp.find( 'a' ).each( function() {
            html += '<div class="ac-item">' + jq( this ).text() + '</div>';
        } );

        $result.css( 'border', '1px solid #A5ACB2' )
            .html( html || s )
            .show();
    } );
}

jQuery( function( $ ) {
    var _query, _cat_id,
        _show_LS = true,
        _close_LS = true;

    // If the elements don't exist, exit this function.
    if ( $( '#search_keywords' ).size() < 1 ||
    $( '#search_categories' ).size() < 1 ) {
        return;
    }

    function _runAutoSuggest( q ) {
        var query = q || $( '#search_keywords' ).val(),
            cat_id = $( '#search_categories' ).val();

        if ( query !== _query || cat_id !== _cat_id ) {
            listingsLiveSearch( query, cat_id );

            _show_LS = true;
        }

        _query = query;
        _cat_id = cat_id;
    }

    // When user types a valid keyword or text.
    $( '#search_keywords' ).on( 'keyup', function( e ) {
        var value = $( this ).val();
        if ( value && e.char ) {
            _runAutoSuggest( value );
        }
    } );

    // Handles first-time focus including click.
    $( '#search_keywords' ).one( 'focus', function() {
        var value = $( this ).val();
        if ( value ) {
            _runAutoSuggest( value );
        }
    } );

    $( '<div id="livesearch" style="display: none;"></div>' )
        .insertAfter( '#search_keywords' );

    // When a auto-suggest result is "selected".
    $( '#livesearch' ).on( 'click', '.ac-item', function() {
        $( this ).siblings().removeClass( 'active' );
        $( this ).addClass( 'active' );

        // Updates the value of the search keyword field.
        $( '#search_keywords' ).val( $( this ).text() );

        // Hides the auto-suggest results.
        $( '#livesearch' ).hide();
    } );

    // When the search keyword field is focused.
    $( '#search_keywords' ).on( 'focus', function() {
        if ( _show_LS && ! $( '#livesearch' ).is( ':empty' ) ) {
            $( '#livesearch' ).show();
        }
    } );

    // When a different/new category is selected.
    $( '#search_categories' ).on( 'change', function() {
        var _ok = ( this.value === _cat_id ),
            $divs = $( '.ac-item', '#livesearch' );

        if ( _ok ) {
            $( '#search_keywords' ).val( $divs.filter( '.active' ).text() );
            $divs.show();
        } else {
            $( '#search_keywords' ).val( '' );
            $divs.hide();
        }

        _show_LS = _ok;
    } );


    // The following are used for closing the auto-suggest results box when clicking on
    // the page, or when the Esc key is pressed.

    $( '#search_keywords, #livesearch' ).on( 'mouseover', function() {
        _close_LS = false;
    } ).on( 'mouseleave', function() {
        _close_LS = true;
    } );

    $ ( document ).on( 'click', function() {
        if ( _close_LS ) {
            $( '#livesearch' ).hide();
        }
    } ).on( 'keydown', function( e ) {
        if ( 27 === e.keyCode && _close_LS ) {
            $( '#livesearch' ).hide();
        }
    } );
} );