使用Wordpress自动完成jQuery [英] Autocomplete jQuery with Wordpress

问题描述

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

I want to retrive data from a json file using Jquery autocomplete and ajax call in Wordpress.

这是我的代码:

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"的自动填充功能.

Something is wrong on my code. I need the autocomplete based on "nomeComune".

在控制台中，我收到此警告:

In console I got this warning:

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

感谢您的帮助.

谢谢

推荐答案

想一想您在这里做什么，应该如何工作:

Think for a moment about what you are doing here how it is supposed to work:

$(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文档将匿名函数传递给 source 自动完成功能选项，您可以通过执行自定义请求，根据给定输入的当前值(存储在request.term属性中)过滤建议.
但是，似乎您只想提取一次json并将其用作源即可.
为此，您需要将对jQuery.autocomplete函数的调用移至"mon_action"后端API端点的成功回调中.

According to jQuery documentation passing anonymous function to source option of autocomplete gives you possibility to filter suggestions based on current value of given input (stored in request.term property) by doing your custom request.
It seems though, that you just want to fetch your json once and use it as source.
In order to do so you need to move your invocation of jQuery.autocomplete function to success callback of "mon_action" backend API endpoint.

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

幸运的是，您的代码中还有另一个错误，因为否则自动补全会起作用，并且您不会注意到，有成百上千个不必要的请求.
您不想直接映射数据(这是JSON对象，因此您无法映射它)，而是想映射数据的"comuni"属性(即数组).

Luckily there is another error in your code, luckily, because otherwise autocompletion would work and you wouldn't notice, that there are hundreds of unnecessary requests.
You don't want to map data directly (which is JSON object, so you cannot map it), you want to map "comuni" property of your data, which is an array.

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

这篇关于使用Wordpress自动完成jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！