jQuery autocomplete in Wordpress

Question

Я пытаюсь настроить Autocomplete на сайте wordpress с помощью PHP-скрипта. Но в моем коде ничего не отображается. Я понимаю, что общая идея состоит в том, чтобы иметь функцию jQuery, которая будет использовать PHP-скрипт, который в этом случае будет вытаскивать данные MySQL (suggest.php). Также, если бы я должен был поставить

<script> 
    $(function() { 
    $("#tags").autocomplete({ 
     source: 'suggest.php', 
     minLength:1 

    }); 
    }); 
</script> 

в myScript.js под папкой js, как бы мне получить к нему доступ? Мой полный код ниже ...

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
<script> 
    $(function() { 
    $("#tags").autocomplete({ 
     source: 'suggest.php', 
     minLength:1 

    }); 
    }); 
</script> 

<form action="" method="post"> 
Name: <input type="text" name="tags" id="tags" value="<?php echo isset($_POST['tags']) ? $_POST['tags'] : '' ?>"/> 
</form> 

Answer 1

Прежде всего, не включают в себя весь jquery-ui, это совершенно не нужно.

Прежде всего, не ставьте свои скрипты вручную. Вот почему WordPress имеет enqueuing.

Прежде всего вам нужно поставить в очередь ваш скрипт, где будет автозаполнение, и оно должно зависеть от автозаполнения. Так что в вашем functions.php вы бы поставил

add_action('after_setup_theme', 'yourtheme_theme_setup'); 

if (! function_exists('yourtheme_theme_setup')) { 
    function yourtheme_theme_setup() { 

     add_action('wp_enqueue_scripts', 'yourtheme_frontend_scripts'); 

    } 
} 

if (! function_exists('yourtheme_frontend_scripts')) { 
    function yourtheme_frontend_scripts() { 

     wp_enqueue_script('yourtheme_custom', get_template_directory_uri().'/js/custom.js', array('jquery-ui-autocomplete', 'jquery'), '1.0.0', true); 

     wp_localize_script('yourtheme_custom', 'yourtheme_autocomplete', array(
      'autocomplete' => json_encode($results_array), // Results array contains all your autocomplete words 
     )); 
    } 
} 

Как вы называете ваш файл .js до вас. Я называю это custom.js и помещаю его в папку/js в теме.

Вам также понадобится $results_array со всеми вашими автозаполненными словами. Обычно я устанавливаю их вручную или запрашиваю базу данных, если это необходимо.

Тогда в вашем custom.js вы поставить что-то вроде этого:

jQuery(document).ready(function($) { 
    "use strict"; 

    var autocomplete_terms = JSON.parse(yourtheme_autocomplete.autocomplete); 


    $('#tags').autocomplete({ 
     source: autocomplete_terms, 
     minLength: 1 
    }); 

}); 

Должен работать нормально. Крутая дополнение, если у вас есть акценты или латинские расширенные условия, чтобы добавить их к акцентной карте

jQuery(document).ready(function($) { 
    "use strict"; 

    var autocomplete_terms = JSON.parse(yourtheme_autocomplete.autocomplete); 

    var accentMap = { 
     "ä": "a", 
     "ö": "o", 
     "å": "a", 
     "č": "c" 
    }; 

    var normalize = function(term) { 
     var ret = ""; 
     for (var i = 0; i < term.length; i++) { 
      ret += accentMap[ term.charAt(i) ] || term.charAt(i); 
     } 
     return ret; 
    }; 

    $('#tags').autocomplete({ 
     source: function(request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
      response($.grep(autocomplete_terms, function(value) { 
       value = value.label || value.value || value; 
       return matcher.test(value) || matcher.test(normalize(value)); 
      })); 
     } 
    }); 

}); 

Надеется, что это помогает.