Question

所以我正在使用Wordpress网站，该网站是各种业务类型（医生，律师，房地产经纪人等）的目录。我想在我主题的现有搜索栏中实现实时自动提示功能。我设法按照本教程（https://www.w3schools.com/php/php_ajax_livesearch.asp）成功实现了它。

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

我意识到这种改变可能是通过PHP完成的，这就是我遇到麻烦的原因。我对HTML，CSS和Javascript感到满意，但对PHP的经验很少，并且非常感谢任何人可以帮助我的指导或资源。

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

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

相关的搜索框是带有默认文字的框＃34;您在寻找什么？＆＃34;

Answer 1

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

THE SCRIPTS

步骤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代码段正确在页面上加载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' );
    }
} );

CUSTOM CSS

将这些添加到主题的样式表/ CSS文件中：

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

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

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

在Wordpress网站上实现自动完成功能

1 个答案: