在Wordpress网站上实施自动完成功能 [英] Implementing Autocomplete on a Wordpress site

问题描述

因此，我正在一个Wordpress网站上工作，该网站是用于各种业务类型(医生，律师，房地产经纪人等)的目录.我想在主题的现有搜索栏之一上实现实时自动提示功能.我设法遵循了本教程( https://www.w3schools.com/php/php_ajax_livesearch.asp )并成功实现了它.

So I'm working on a Wordpress site which is a directory for a variety of business types (doctors, lawyers, realtors, etc). I'd like to implement a live autosuggestion feature on one of my theme's existing searchbars. I managed to follow this tutorial (https://www.w3schools.com/php/php_ajax_livesearch.asp) and successfully implemented it.

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

However, this implementation of the autosuggestion immediately takes you to a dedicated link specified in an XML file. That is, when you click on the suggestion you'd like to select (ie. Dentist) it automatically takes you to that page. All I'd like the autosuggestion to do is fill the relevant text box with the selected text.

我意识到此更改可能会通过PHP进行，这就是我遇到麻烦的原因.我对HTML，CSS和Java脚本很满意，但是对PHP的经验很少，并且会感谢andy的指导或资源，任何人都可以帮助我.

I realize that this change would probably be done through PHP, which is why I'm having trouble. I'm comfortable with HTML, CSS, and Javascript, but have little experience with PHP and would appreciate andy guidance or resources anyone could help me with.

对于与我的问题处理方式无关的任何解决方案，我也持开放态度.

I would also be open to any solutions to my problem that have nothing to do with the way I approached the problem.

指向相关站点(托管在开发域中)的链接: http://temp4.dotdevelopment.net/

A link to the site in question (hosted on a development domain): http://temp4.dotdevelopment.net/

相关的搜索框是带有默认文本您要寻找什么?"的框.

The relevant search box is the box with the default text "What are you looking for?"

推荐答案

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

I have re-created the scripts for you. Feel free to use and modify the code.

脚本

步骤1:请参见 SCRIPT#1 和 SCRIPT#2 ，然后从页面中删除这两个脚本.

Step #1: See SCRIPT #1 and SCRIPT #2 and remove both scripts from the page.

步骤2:下载此JS文件，并将其上传到您的网站(例如，到 wp -content/themes/listify-child/js/).

Step #2: Download this JS file and upload it to your site (e.g. to wp-content/themes/listify-child/js/).

第3步:从页面加载JS文件(例如，在</body>之前添加以下内容):

Step #3: Load the JS file from the page (e.g. add the following before </body>):

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

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

Or you can use the following PHP snippet to properly load the JS file on the page:

// 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文件:

Add these to the theme's stylesheet/CSS file:

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

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

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

这篇关于在Wordpress网站上实施自动完成功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！