在 WordPress 网站上实现自动完成

Question

所以我正在开发一个 Wordpress 网站，该网站是各种业务类型（医生、律师、房地产经纪人等）的目录。我想在我的主题的现有搜索栏之一上实现实时自动建议功能。我设法遵循本教程 (https://www.w3schools.com/php/php_ajax_livesearch.asp) 并成功实现了它。

但是，自动建议的这种实现会立即将您带到 XML 文件中指定的专用链接。也就是说，当您单击要选择的建议（即牙医）时，它会自动将您带到该页面。我想要自动建议做的就是用选定的文本填充相关的文本框。

我意识到这种更改可能会通过 PHP 完成，这就是我遇到麻烦的原因。我对 HTML、CSS 和 Javascript 很熟悉，但对 PHP 的经验很少，我希望得到任何人可以帮助我的 andy 指导或资源。

我也愿意接受任何与我解决问题的方式无关的问题解决方案。

相关网站的链接（托管在开发域上）：http://temp4.dotdevelopment.net/

相关搜索框是带有默认文本“您在寻找什么？”的框。

Answer 1

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

脚本

第 1 步：查看 SCRIPT #1 and SCRIPT #2 并从页面中删除这两个脚本。

第 2 步：下载 this JS file 并将其上传到您的网站（例如，到 wp-content/themes/listify-child/js/）。

步骤#3：从页面加载JS文件（例如在</body>之前添加以下内容）：

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

或者你可以使用下面的PHP sn-p来正确加载页面上的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;
}