在Wordpress站点上实现自动完成

我已经为您重新创建了脚本。可以随意使用和修改代码。

脚本

步骤#1:请参阅 SCRIPT #1 and SCRIPT #2 并从页面中删除这两个脚本。

步骤#2:下载 this JS file 并将其上载到您的网站(例如 wp内容/主题/列表化子项/js/ ).

步骤#3:从页面加载JS文件(例如,在 </body> ):

<script src="wp-content/themes/listify-child/js/custom-auto-suggest.js"></script>

或者您可以使用以下PHP代码段 正确地 在页面上加载JS文件:

// Add this code snippet to functions.php
add_action( 'wp_enqueue_scripts', function() {
    // Load the JS file only on the home page.
    if ( is_home() ) {
        // Here, I assumed the JS file is at wp-content/themes/listify-child/js/custom-auto-suggest.js
        wp_enqueue_script( 'custom-auto-suggest', get_theme_file_uri( '/js/custom-auto-suggest.js' ), array( 'jquery' ), '20180302' );
    }
} );

自定义CSS

将以下内容添加到主题的样式表/CSS文件中:

/* Styles for the AJAX auto-suggest results. */

#livesearch .ac-item {
    cursor: pointer;
}

#livesearch .ac-item.active,
#livesearch .ac-item:hover {
    color: red;
}