jQuery Wordpress 中的自动完成

Question

我正在尝试使用 PHP 脚本在 wordpress 网站上设置自动完成功能。但目前我的代码中没有显示任何内容。我知道一般的想法是有一个 jQuery 函数，该函数将使用 PHP 脚本，在这种情况下会提取 MySQL 数据（suggest.php）。另外，如果我要放

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

    });
  } );
</script>

在js文件夹下的myScript.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 ) );
            }) );
        }
    });

});

希望这对您有所帮助。

jQuery Wordpress 中的自动完成

jQuery autocomplete in Wordpress

php

wordpress

jquery

jquery-ui-autocomplete