Question

我有一个表单，我希望jQuery自动完成搜索要匹配的人。我希望它们下面列出的地址像custom data JQuery UI。然后将其数据库ID添加到隐藏字段以用于表单。我正在使用WordPress，并尝试让wp_localize通过数组。我建立它，然后尝试添加它。到目前为止，似乎没有js错误。但是它运行了一秒钟，测试时返回了404。

我以前从未通过wp_localize通过vars。我认为这确实很接近，但是我对这种特定方法并不熟悉，因此不确定我缺少什么。这是我到目前为止所拥有的。

这是我的php文件以排队并创建数组。

function add_scripts(){
    wp_enqueue_script('jquery');

    //setting array for donor selection
    $donor_data = soco_get_donor_list ();
    $donor_array = array();
    foreach ($donor_data as $dd) {
        $entry = $dd->last_name.', '.$dd->first_name;
        $donor_array[] = array(
            'label' => $entry,
            'value' => $dd->iddonor,
            'address1' => $dd->address1
        );
    }

    wp_register_script( 'soco_js', plugin_dir_url( __FILE__ ) . 'js/soco.js' );
    wp_localize_script('soco_js', 'soco_donor_array', json_encode($donor_array)); 
    wp_enqueue_script( 'soco_js' );
    wp_enqueue_script( 'jquery-ui-autocomplete' );
}
add_action('wp_enqueue_scripts', 'add_scripts');

然后我的js文件中有这个。

$( function() {
    $( "#donor_name" ).autocomplete({
        minLength: 3,
        source: soco_donor_array,
        focus: function( event, ui ) {
            $( "#donor_name" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#donor_name" ).val( ui.item.label );
            $( "#hdn-donor-id" ).val( ui.item.value );

            return false;
        }
    } )
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
        return $( "<li>" )
            .append( "<div>" + item.label + "<br>" + item.address1 + "</div>" )
            .appendTo( ul );
    };

});

然后终于使用了HTML输出。

<div class="flex-item"><strong>Donor</strong>: <br /><input type="text" id="donor_name" name="donor_name" >
                  <input type="hidden" name="hdn-donor-id" value="'.$donor_id.'"></div

在其他一些调试代码中，我看到了数组。有一个按钮可以在警报中抛出阵列。看起来不错。就像他们的例子一样。

当我在字段中输入“ Smith”时，它不会弹出任何建议，几秒钟后我就会在控制台中看到此404错误。

jquery.js?ver=1.12.4:4 GET https://localhost/url.com/view-contributions/...long string of %22Name%22Othername%22...?term=Smith 404 (Not Found) send @ jquery.js?ver=1.12.4:4 ajax @ jquery.js?ver=1.12.4:4 a.isArray.string.options.source.source @ autocomplete.min.js?ver=1.11.4:11
_search @ autocomplete.min.js?ver=1.11.4:11 (anonymous) @ widget.min.js?ver=1.11.4:11 search @ autocomplete.min.js?ver=1.11.4:11 (anonymous) @ widget.min.js?ver=1.11.4:11 (anonymous) @ autocomplete.min.js?ver=1.11.4:11 c @ widget.min.js?ver=1.11.4:11 setTimeout (async)
_delay @ widget.min.js?ver=1.11.4:11
_searchTimeout @ autocomplete.min.js?ver=1.11.4:11 (anonymous) @ widget.min.js?ver=1.11.4:11 input @ autocomplete.min.js?ver=1.11.4:11 h @ widget.min.js?ver=1.11.4:11 dispatch @ jquery.js?ver=1.12.4:3 r.handle @ jquery.js?ver=1.12.4:3

jquery.js?ver=1.12.4:4 XHR failed loading: GET "https://localhost/url.com/view-contributions/...long string of %22Name%22Othername%22...?term=Smith".

看来这真的很接近，但是我不确定下一步该去哪里调查。你有什么想法？当前的数组大约有2500个条目。太多了吗？

它并没有完全打破它。如果我尝试使用“ John”，它会思考片刻，并且会出现另一组错误。这次与John一起在网址末尾。

任何帮助或建议将不胜感激！谢谢！

wp_localize使用自定义数据自动完成

0 个答案: