javascript - 在 WordPress 中使用自动完成会导致一些错误

Question

我目前正在尝试将自动完成添加到我页面上的输入中，当我开始输入时它应该动态返回搜索结果。基本上，一切正常，但我在前端遇到错误并且没有显示结果：

Uncaught TypeError: Cannot read property 'suggestions' of null
    at t.processResponse (jquery.autocomplete.min.js:1)
    at Object.<anonymous> (jquery.autocomplete.min.js:1)
    at i (jquery.js:2)
    at Object.fireWith [as resolveWith] (jquery.js:2)
    at x (jquery.js:4)
    at XMLHttpRequest.c (jquery.js:4)

Uncaught TypeError: Cannot read property 'length' of undefined
    at t.verifySuggestionsFormat (jquery.autocomplete.min.js:1)
    at t.processResponse (jquery.autocomplete.min.js:1)
    at Object.<anonymous> (jquery.autocomplete.min.js:1)
    at i (jquery.js:2)
    at Object.fireWith [as resolveWith] (jquery.js:2)
    at x (jquery.js:4)
    at XMLHttpRequest.c (jquery.js:4)

这是我的 JS 函数：

<script>
    jQuery( document ).ready( function () {
        let searchAutocompleteUrl = "<?= admin_url( 'admin-ajax.php' ) ?>?action=search_autocomplete";
        jQuery( 'input[type=search]' ).devbridgeAutocomplete( {
            serviceUrl: searchAutocompleteUrl,
            minLength: 3
        } );
    } );
</script>

这是我的 PHP 函数：

add_action( 'wp_ajax_search_autocomplete', 'search_autocomplete' );
add_action( 'wp_ajax_nopriv_search_autocomplete', 'search_autocomplete' );
function search_autocomplete() {

    $args = array(
        'post_type' => 'product',
    );

    $products = new WP_Query( $args );
    $items    = array();

    if ( $products !== null ) {
        foreach ( $products->posts as $result ) {
            $items[] = $result->post_title;
        }
    }

    echo json_encode( $items );
    wp_die();
}

这是我开始输入时收到的结果：

["dsdfsduzfgsdufzgsdfuzgsuzgfuszgdfuzgsdf","sdfsdfusfiusuzsuzsfuzgfuzgsduzgusdzgf","Ich bin ein Hund"]

你有什么想法我可以完成这件事吗？

标签： javascriptphpjquerywordpressautocomplete