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 结合使用。

首先将此行添加到您的主题或子主题中的function.php：

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');

第二次制作要使用的字符串列表，在同一文件夹中创建名为：“list.php”的新文件 并将您的数据放入下面的代码（我在这里有一些海港的名称、地址和位置存储在 php 数组 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 使用。

最终任务：将此代码添加到您的页面。我使用了输入的类 jQuery 中的名称，以便您可以处理多个输入。

    //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>

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