jQuery UI 自动完成功能在 WordPress 定制器中不起作用

Question

我很难让 jQuery UI 自动完成功能在 WordPress 定制器中工作。

我构建了以下自定义控件以将其集成到 WordPress 定制器中。

<?php

namespace MailOptin\Core\Admin\Customizer\CustomControls;

use WP_Customize_Control;

class WP_Customize_Autocomplete_Input_Control extends WP_Customize_Control
{
    public $type = 'mailoptin_autocomplete';

    public $field_id = 'mo-autocomplete';

    public $options = [];

    public $input_type = 'text';

    public $sub_description;

    public function enqueue()
    {
        wp_enqueue_script(
            'mailoptin-autocomplete-init',
            MAILOPTIN_ASSETS_URL . 'js/customizer-controls/autocomplete-init.js',
            array('jquery', 'customize-base', 'jquery-ui-core', 'jquery-ui-widget', 'jquery-ui-autocomplete'),
            false,
            true
        );
    }

    public function render_content()
    {
        ?>
        <div>
            <label>
                <?php if (!empty($this->label)) : ?>
                    <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
                <?php endif;
                if (!empty($this->description)) : ?>
                    <span class="description customize-control-description"><?php echo $this->description; ?></span>
                <?php endif; ?>
                <input id="<?php echo $this->field_id; ?>" class="mo-autocomplete" value="<?php echo esc_attr($this->value()); ?>" <?php $this->link(); ?> />
                <?php if (!empty($this->sub_description)) : ?>
                    <span class="description customize-control-description"><?php echo $this->sub_description; ?></span>
                <?php endif; ?>
            </label>
        </div>
        <?php
    }
}

下面是自定义控件的附带 JS 文件

wp.customize.controlConstructor['mailoptin_autocomplete'] = wp.customize.Control.extend({
    ready: function () {
        var control = this;

        jQuery( function() {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            jQuery( ".mo-autocomplete" ).autocomplete({
                source: availableTags
            });
        } );
    }
});

但是它不起作用。

假设我在字段中输入“PHP”，标记将更改为下面的代码，但它不起作用。不显示建议下拉列表。

<input class="mo-autocomplete ui-autocomplete-input" value="" data-customize-setting-link="mo_optin_campaign[98][subscriber_tag]" autocomplete="off">

Answer 1

有一些简单的方法可以将 jQuery UI 与 Wordpress 结合使用。

First add this lines to function.php inside your theme or child-theme:

function theme_enqueue_scripts()
{
    // Enqueue jQuery UI and autocomplete
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-autocomplete');
}

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

Seconde make list of strings for use, Create new file named : "list.php" in same folder and put below codes with your data in it (i have here names, address and location of some sea ports stored in php array associative) :

    <?php
    $ports=array(
    array(
        'country' => 'Albania',
        'port' => 'Durres (Durazzo)',
        'code' => 'AL DRZ',
        'lat/long' => "41° 19' N / 19° 28' E"
    ),
    array(
        'country' => 'Albania',
        'port' => 'Sarande',
        'code' => 'AL SAR',
        'lat/long' => "39° 53' N / 20° 0' E"
    ),
    array(
        'country' => 'Albania',
        'port' => 'Shengjjin',
        'code' => 'AL SHG',
        'lat/long' => "41° 49' N / 19° 36' E"
    ),
    array(
        'country' => 'Albania',
        'port' => 'Vlore (Vlora, Vlone)',
        'code' => 'AL VOA',
        'lat/long' => "40° 29' N / 19° 29' E"
    )
);
    ?>

在使用元素之前还有两点:1:在您的页面中，您必须包含“list.php”并创建您需要的项目数组。 (在此示例中，我需要端口名称)。2:将 items 制作为 json 以供 jQuery 使用。

Final mission : add this codes to your page. I used input's class name in jQuery so you can handle more than one input.

    //php code
    <?php
    include("list.php");
    $x = 0;
    foreach ($ports as $key => $value) {
        $portName[$x][value] = $value['port'];
        $x += 1;
    }
    ?>
    //html code
    <label for="auto-c">
    <input class="auto-c" id="auto-c" value="">

    //scripts

        <script type="text/javascript">

            jQuery(document).ready(function ($) {
                var items = <?php echo json_encode(array_values($portName), JSON_UNESCAPED_UNICODE); ?>;
        jQuery('input.auto-c').autocomplete({
                        source: items,
                        minLength: 2,
                        select: function (event, ui) {
                            var permalink = ui.item.value; // Get item from the datasource


                        }
                    });
</script>

这不是您案例的答案，但您可以找到它的工作原理并以您的方式使用它......