4. Sử dụng autocomplete.min.js (ok)

https://functions.phpfunctions.php

define( 'PFCOREELEMENTSURLPUBLIC', get_template_directory_uri().'/public/' );
define( 'PFCOREELEMENTSDIR', get_template_directory() );
define( 'PFCOREELEMENTSURLINC', get_template_directory_uri() . '/includes/' );
require get_parent_theme_file_path( '/options.php' );
require get_parent_theme_file_path( '/coreelements.php' );
$plugin = new Coreelements();
$plugin->run();

https://options.phpoptions.php

<?php

if (!trait_exists('OptionFunctions')) {
  /**
   * Option Functions
   */
  trait OptionFunctions {
    public function PFSAIssetControl($field, $field2 = '', $default = '') {
      $pointfindertheme_option = array(
        'setup3_pointposttype_pt1' => 'listing',
        'setup1s_slides'           => array(
          0 => array(
            'select' => '4',
            'title'  => 'Keyword',
            'url'    => 'jobskeyword',
            'sort'   => '12',
          ),
        ),
      );
      return $pointfindertheme_option['' . $field . ''];
    }
    public function PFSFIssetControl($field, $field2 = '', $default = '') {
      $pfsearchfields_options = array(
        'setupsearchfields_jobskeyword_minisearch'       => '1',
        'setupsearchfields_field_listingtype_minisearch' => '1',
        'setupsearchfields_jobskeyword_placeholder'      => 'Từ khóa',
        'setupsearchfields_jobskeyword_target_target'    => 'title',
      );
      return $pfsearchfields_options['' . $field . ''];
    }
  }
}

https://coreelements.phpcoreelements.php

<?php
class Coreelements {
  use OptionFunctions;
  protected $loader;
  public function __construct() {
    $this->load_dependencies();
    $this->define_public_hooks();
    $this->define_ajax_hooks();
  }
  private function load_dependencies() {
    require_once PFCOREELEMENTSDIR . '/pfgetsearchfields.php';
    if (function_exists('vc_set_shortcodes_templates_dir')) {
      require_once PFCOREELEMENTSDIR . '/includes/pf-search.php';
    }
    require_once PFCOREELEMENTSDIR . '/coreelements-loader.php';
    require_once PFCOREELEMENTSDIR . '/coreelements-public.php';
    require_once PFCOREELEMENTSDIR . '/coreelements-ajax.php';
    require_once PFCOREELEMENTSDIR . '/autocomplete.php';
    require_once PFCOREELEMENTSDIR . '/coreelements-dashboard-page.php';
    $this->loader = new Coreelements_Loader();
  }
  private function define_public_hooks() {
    $plugin_public = new Coreelements_Public();
    $this->loader->add_action('wp_enqueue_scripts', $plugin_public, 'enqueue_styles_scripts');
    $plugin_dashboardpage = new DashboardPageClass();
    $this->loader->add_action('dashboardpage_hook', $plugin_dashboardpage, 'dashpage_maindash');
  }
  private function define_ajax_hooks() {
    $AutoCMPLT = new AutoCMPLT();
    $this->loader->add_action('PF_AJAX_HANDLER_pfget_autocomplete', $AutoCMPLT, 'pf_ajax_autocomplete');
    $this->loader->add_action('PF_AJAX_HANDLER_nopriv_pfget_autocomplete', $AutoCMPLT, 'pf_ajax_autocomplete');
  }
  public function run() {
    $this->loader->run();
  }
}
?>

coreelements-dashboard-page.php

<?php
if (class_exists('DashboardPageClass')) {
  return;
}
class DashboardPageClass {
  public function __construct() {}
  public function dashpage_maindash() {
    echo '<section role="main" style="margin-top: 100px;">';
	    echo '<div class="pf-container">';
		    echo '<div class="pf-row">';
			    echo '<div class="col-lg-12">';
			    	the_content();
			    echo '</div>';
		    echo '</div>';
	    echo '</div>';
    echo '</section>';
  }
}
?>

pfgetsearchfields.php

<?php
if (!class_exists('PF_SF_Val')) {
  class PF_SF_Val {
    use OptionFunctions;
    public $FieldOutput;
    public $ScriptOutput;
    public function __construct() {}
    function GetMiniSearch($minisearchc = 1) {
      switch ($minisearchc) {
        case '3':
          return '<div class="col-lg-3 col-md-3 col-sm-6 colhorsearch lionel2">';
          break;
      }
    }
    function ShowOnlyWidgetCheck($widget, $slug, $minisearch) {
      $showonlywidget_check = 'show';
      $showonlywidget       = 0;
      $minisearchadm        = $this->PFSFIssetControl('setupsearchfields_' . $slug . '_minisearch', '', '0');
      $minisearchso         = 0;
      if ($showonlywidget == 0 && $widget == 0) {
        $showonlywidget_check = 'show';
      } elseif ($showonlywidget == 1 && $widget == 0) {
        $showonlywidget_check = 'hide';
      } else {
        $showonlywidget_check = 'show';
      }
      if ($minisearch == 1 && $minisearchadm == 0) {
        $showonlywidget_check = 'hide';
      } elseif ($minisearch == 0 && $minisearchso == 1) {
        $showonlywidget_check = 'hide';
      }
      return $showonlywidget_check;
    }
    function GetValue($title, $slug, $ftype, $widget = 0, $pfgetdata = array(), $hormode = 0, $minisearch = 0, $minisearchc = 1) {
      $showonlywidget_check = $this->ShowOnlyWidgetCheck($widget, $slug, $minisearch);
      switch ($ftype) {
        case '4':
          if ($showonlywidget_check == 'show') {
            $target      = $this->PFSFIssetControl('setupsearchfields_' . $slug . '_target_target', '', '');
            $fieldtext   = '';
            $placeholder = $this->PFSFIssetControl('setupsearchfields_' . $slug . '_placeholder', '', '');
            if ($hormode == 1 && $widget == 1 && $minisearch == 1) {
              $this->FieldOutput .= $this->GetMiniSearch($minisearchc);
            }
            if (array_key_exists($slug, $pfgetdata)) {
              $valtext = ' value = "' . $pfgetdata[$slug] . '" ';
            } else {
              $valtext = '';
            }
            $this->FieldOutput .= '
						<div id="' . $slug . '_main">
						<label for="' . $slug . '" class="pftitlefield">' . $fieldtext . '</label>
						<label class="lbl-ui pflabelfixsearch pflabelfixsearch' . $slug . '">
							<input type="text" name="' . $slug . '" id="' . $slug . '" class="input" placeholder="' . $placeholder . '"' . $valtext . ' />
						</label>
						</div>';
            $this->ScriptOutput .= '
						$( "#' . $slug . '" ).on("keydown",function(){
						$( "#' . $slug . '" ).autocomplete({
							position: { my : "right top", at: "right bottom" },
						  appendTo: "body",
				      source: function( request, response ) {
				        $.ajax({
				          url: theme_scriptspf.ajaxurl,
				          dataType: "jsonp",
				          data: {
				          	action: "pfget_autocomplete",
				            q: request.term,
				            security: theme_scriptspf.pfget_autocomplete,
				            lang: "vi",
				            ftype: "' . $target . '"
				          },
				          success: function( data ) {
				            response( data );
				          }
				        });
				      },
				      minLength: 3,
				      select: function( event, ui ) {
				        $("#' . $slug . '").val(ui.item);
				      },
				      open: function() {
				        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
				        $( ".ui-autocomplete" ).css("width",$("body").find("#' . $slug . '").outerWidth());
				      },
				      close: function() {
				        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
				      }
					  });
						});';
            if (($hormode == 1 && $widget == 0 && $target != 'google') || ($hormode == 1 && $widget == 1 && $minisearch == 1)) {
              $this->FieldOutput .= '</div>';
            }
          }
          break;
      }
    }
  }
}
?>

pf-search.php

<?php
if ( ! defined( 'ABSPATH' ) ) {
  die( '-1' );
}
class SearchShortcode extends WPBakeryShortCode {
  use OptionFunctions;
  function __construct() {
    add_shortcode( 'pf_searchw', array( $this, 'single_pf_searchw_module_html' ) );
  }
  public function single_pf_searchw_module_html( $atts ) {
    $output = $title = $number = $el_class = $mini_style = '';
    extract( 
      shortcode_atts( 
        array(
          'minisearchc' => 1,
          'searchbg' => '',
          'searchtext' => '',
          'mini_padding_tb' => 0,
          'mini_padding_lr' => 0,
          'mini_bg_color' => '',
          'mini_radius' => 0
        ), $atts 
      ) 
    );
    $coln = '<div class="col-lg-3 col-md-3 col-sm-6 colhorsearch">';
    switch ($minisearchc) {
      case '3':
      $coln = '<div class="col-lg-3 col-md-3 col-sm-6 colhorsearch lionel1">';
      break;
    }
    $mini_style = " style='";
    if (!empty($mini_bg_color)) {
      $mini_style .= "background-color:".$mini_bg_color.';';
    }
    $mini_style .= "padding: ".$mini_padding_tb."px ".$mini_padding_lr."px;";
    if (!empty($mini_radius)) {
      $mini_style .= "border-radius:".$mini_radius.'px;';
    }
    $mini_style .= "'";
    if ($searchbg != '' && $searchtext != '') {
      $searchb_style = " style='color:".$searchtext."!important;background-color:".$searchbg."!important'";
    } else {
      $searchb_style = "";
    }
    ob_start();
    ?>
    <div class="-mini-search <?php echo ' pfministyle'.$minisearchc;?>"<?php echo $mini_style;?>>
      <form id="-search-form-manual" class="pfminisearch" method="get" action="<?php echo esc_url(home_url("/")); ?>" data-ajax="false">
        <div class="pfsearch-content golden-forms">
          <div class="pf-row">
            <?php 
              $setup1s_slides = $this->PFSAIssetControl('setup1s_slides','','');
              if(is_array($setup1s_slides)){     
              $PFListSF = new PF_SF_Val();
              foreach ($setup1s_slides as &$value) {
                $PFListSF->GetValue('keyword',$value['url'],4,1,[],1,1,3);
              }
              echo $PFListSF->FieldOutput;
              echo $coln;
              echo '<div id="pfsearchsubvalues"></div>';
              echo '<input type="hidden" name="s" value=""/>';
              echo '<input type="hidden" name="serialized" value="1"/>';
              echo '<input type="hidden" name="action" value="pfs"/>';
              echo '<a class="button pfsearch" id="pf-search-button-manual"'.$searchb_style.'><i class="pfadmicon-glyph-627"></i> '.esc_html__('SEARCH', 'pointfindercoreelements').'</a>';
              $script_output = '
              (function($) {
                $(function(){'.$PFListSF->ScriptOutput;
                $script_output .= '
                });'.$PFListSF->ScriptOutputDocReady;
              }
              $script_output .='})(jQuery);';
              wp_add_inline_script('theme-scriptspf',$script_output,'after');
              echo '</div>';
            ?>
          </div>
        </div>
      </form>
    </div>
  <?php
    $output = ob_get_contents();
    ob_end_clean();
    return $output;
  }
}
new SearchShortcode();

https://coreelements-public.phpcoreelements-public.php

<?php
class Coreelements_Public {
  public function enqueue_styles_scripts() {
    wp_register_script('theme-scriptspf', PFCOREELEMENTSURLPUBLIC . 'js/theme-scripts.js', ['jquery', 'jquery-ui-autocomplete'], '2.0', true);
    wp_enqueue_script('theme-scriptspf');
    wp_localize_script('theme-scriptspf', 'theme_scriptspf', array('ajaxurl' => PFCOREELEMENTSURLINC . 'pfajaxhandler.php', 'pfget_autocomplete' => wp_create_nonce('pfget_autocomplete'),
    ));
  }
}
?>

https://coreelements-ajax.phpcoreelements-ajax.php

<?php
if (class_exists('Coreelements_AJAX')) {
  return;
}
class Coreelements_AJAX {
  use OptionFunctions;
}

autocomplete.php

<?php

if (class_exists('AutoCMPLT')) {
  return;
}
class AutoCMPLT extends Coreelements_AJAX {
  public function pf_ajax_autocomplete() {
    check_ajax_referer('pfget_autocomplete', 'security');
    header('Content-Type: application/javascript; charset=UTF-8;');
    if (isset($_GET['ftype']) && $_GET['ftype'] != '') {
      $ftype = sanitize_text_field($_GET['ftype']);
    }
    if (isset($_GET['callback']) && $_GET['callback'] != '') {
      $callback = sanitize_text_field($_GET['callback']);
    };
    $tax_query                = false;
    $setup3_pointposttype_pt1 = $this->PFSAIssetControl('setup3_pointposttype_pt1', '', '');
    $args                     = array('post_type' => $setup3_pointposttype_pt1, 'post_status' => 'publish', 'posts_per_page' => 5);
    $output_arr               = array();
    $the_query                = new WP_Query($args);
    if ($the_query->have_posts()):
      while ($the_query->have_posts()): $the_query->the_post();
        if ($ftype == 'title' || $ftype == 'description' || $ftype == 'title_description') {
          $output_arr[] = html_entity_decode(get_the_title());
        }
      endwhile;
      wp_reset_postdata();
    endif;
    echo $callback . '(' . json_encode($output_arr) . ');';
    die();
  }
}

https://pfajaxhandler.phppfajaxhandler.php

<?php
define('DOING_AJAX', true);
if (!isset($_POST['action'])) {
  if (!isset($_GET['action'])) {
    die('Not supported.');
  }
  ;
}
;
$absolute_path = __FILE__;
$path_to_file  = explode('wp-content', $absolute_path);
$path_to_wp    = $path_to_file[0];
require_once $path_to_wp . '/wp-load.php';
header('Content-Type: text/html');
send_nosniff_header();
header('Cache-Control: no-cache');
header('Pragma: no-cache');
if (!empty($_POST['action'])) {
  $action = trim($_POST['action']);
}
if (empty($action)) {
  $action = trim($_GET['action']);
}
$allowed_actions = array(
  'pfget_autocomplete',
);
if (in_array($action, $allowed_actions)) {
  if (is_user_logged_in()) {
    do_action('PF_AJAX_HANDLER_' . $action);
  } else {
    do_action('PF_AJAX_HANDLER_nopriv_' . $action);
  }
} else {
  die('-2');
}
?>

https://page.phppage.php

<?php
get_header();
if (have_posts()) {
  while (have_posts()) {
    the_post();
    do_action('dashboardpage_hook');
  }
};
get_footer();

css

/*autocomplete*/
.wplink-autocomplete {
  display: none!important;
}
.ui-autocomplete {
  z-index: 10000;
  background: #fff;
  list-style: none !important;
  margin: 0;
  padding: 5px 0 0 0!important;
  border-width: 0 1px 1px 1px;
  border-color: #EFEFEF;
  border-style: solid;
  color: #494949;
}
.ui-autocomplete li {
  margin-bottom: 3px;
  font-size: 12px;
  padding: 3px 10px 3px 10px!important;
  border-bottom: 1px dotted;
  border-color: #efefef;
  cursor: pointer;
}
.ui-autocomplete li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.ui-autocomplete-loading {
  background-image: url(assets/images/info-loading.gif)!important;
  background-size: 16px 16px!important;
  background-repeat: no-repeat!important;
  background-position: 96.5% center!important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
.ui-autocomplete li:hover {
  background: #f7f7f7;
}
.ui-helper-hidden-accessible {
  display: none;
}
.widget_pfitem_recent_entries .ui-autocomplete li:last-child {
  margin-bottom: 0!important;
}
.pfwidgetinner .ui-autocomplete {
  height: auto!important;
  background-color: #fff;
}
/*autocomplete*/
label.pftitlefield {
  display: inline;
}