JQuery автозаполнение в WordPress
Я пытаюсь настроить автозаполнение на WordPress сайте с помощью сценария PHP. Но в моем коде в данный момент ничего не отображается. Я понимаю, что общая идея состоит в том, чтобы иметь функцию jQuery, которая использовала бы скрипт PHP, который в этом случае извлекал бы данные MySQL (offer.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>
Решение
Прежде всего, не включать в себя весь 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 ) );
}) );
}
});
});
Надеюсь это поможет.
Другие решения
Других решений пока нет …