使用 Wordpress 自动完成 jQuery

我想在 Wordpress 中使用 Jquery 自动完成和 ajax 调用从 json 文件中检索数据。

这是我的代码：

HTLM

<div class="form-group formComuni">
    <label for="input-button" class="sr-only">Inserisci il nome del tuo Comune</label>
    <div class="input-group inputComuni">
        <input name="search" id="comuni" class="form-control large-input align-middle" type="text" placeholder="Inserisci il nome del tuo Comune"><i class="fas fa-search fa-lg"></i>
    </div>
</div>

JSON

{"comuni":[{"datapresub":"01/02/2000","datasub":"01/02/2018","nomeComune":"ROMA","provincia":"RM"},{"nomeComune":"ROMAGNANO AL MONTE","provincia":"SA"},{"nomeComune":"ROMAGNANO SESIA","provincia":"NO"},{"nomeComune":"ROMAGNESE","provincia":"PV"},{"nomeComune":"ROMANA","provincia":"SS"},{"nomeComune":"ROMANENGO","provincia":"CR"},{"nomeComune":"ROMANO CANAVESE","provincia":"TO"},{"nomeComune":"ROMANO D'EZZELINO","provincia":"VI"},{"nomeComune":"ROMANO DI LOMBARDIA","provincia":"BG"},{"nomeComune":"ROMANS D'ISONZO","provincia":"GO"},{"nomeComune":"ROMBIOLO","provincia":"VV"},{"nomeComune":"ROMENO","provincia":"TN"},{"nomeComune":"ROMENTINO","provincia":"NO"},{"nomeComune":"ROMETTA","provincia":"ME"}]}

JS

$(function(){
    $( "#comuni" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                type: 'POST',
                url: ajaxUrl,
                data: {
                    action: "mon_action"
                },
                success: function(data) {
                response( $.map(data, function(item) {
                    return item.nomeComune;
                }));
            }
            });
        },
        minLength: 3,
    });
}

PHP

add_action( 'wp_ajax_mon_action', 'mon_action' );
add_action( 'wp_ajax_nopriv_mon_action', 'mon_action' );

function mon_action() {

    $request = wp_remote_get( "https://demo.ec2webdesign.com/anpr-dev/rom.json", array(
        'headers' => array('Content-Type' => 'application/json;')
    ) );

    if( is_wp_error( $request ) ) {
        return false;
    }
    $body = wp_remote_retrieve_body( $request );
    $data = json_decode( $body );
    echo json_encode($data->comuni);
    echo ($body);
}

我的代码有问题。我需要基于“nomeComune”的自动完成功能。

在控制台中我收到此警告：

TypeError: cannot use 'in' operator to search for "length" in "[{\"datapresub\":\"..."

任何帮助表示赞赏。

Thanks

思考一下您在这里所做的事情，它应该如何工作：

$(function(){
    $( "#comuni" ).autocomplete({
       source: function( request, response ) {
            $.ajax({
                    type: 'POST',
                    url: ajaxUrl,
                    data: {
                    action: "mon_action"
                     },
                    success: function(data) {
                    response( $.map(data, function(item) {
                        return item.nomeComune;
                     }));
                 }
               });
            },
       minLength: 3,
}

根据jQuery 文档 https://api.jqueryui.com/autocomplete/#option-source将匿名函数传递给source自动完成选项使您可以通过执行自定义请求，根据给定输入的当前值（存储在 request.term 属性中）过滤建议。
不过，您似乎只想获取 json 一次并将其用作源。
为此，您需要将对 jQuery.autocomplete 函数的调用移至“mon_action”后端 API 端点的成功回调。

 $.ajax({
         type: 'POST',
         url: ajaxUrl,
         data: {
           action: "mon_action"
          },
          success: function(data) {
              $( "#comuni" ).autocomplete({
               // TODO: parse data properly
               source: data
             })
         }
       });

幸运的是，您的代码中还有另一个错误，因为否则自动完成功能会起作用，而您不会注意到有数百个不必要的请求。
您不想直接映射数据（这是 JSON 对象，因此无法映射它），您想映射数据的“comuni”属性，这是一个数组。

$.map(data.comuni, function(item) {
     return item.nomeComune;
    })