update How to add support for search suggestions

[Tech Support]

In the new theme version we decided to add vanilla support for search suggestions. It can work in 2 modes: similar search mode, when suggestions are search queries that your other users submitted (default), and content mode, when search suggestions are grouped from models, videos and albums.

Here are screenshots that show the difference:

 

While this feature will be added into the upcoming new theme version, theme updates are never available for old projects and thus we decided to make this update available for everyone.

Please go to Website UI -> Theme settings. If it says KVS Default (7.6) or above, then you don't need to do anything and this functionality is already included in your theme. Just scroll down theme settings to see this option:

IMPORTANT. This functionality may heavily increase your database and overall server load.

 

How to add search suggestions into older themes

You can add this functionality to KVS default theme and to any other theme that uses jquery (all paid KVS themes are built using jquery). There is only one thing that may need to be adjusted if your theme is not KVS default theme, we will indicate that later.

 

Step 1. Download this archive and unpack on top of your project FTP:

https://kernel-scripts.com/updates/search_suggestions.zip

This archive will create a new page named Search Suggestions. If you open this page in Website UI -> Pages section of your admin panel, in most cases it will be highlighted with orange color that indicates lack of filesystem permissions for editing this page settings in admin panel. This is OK in most cases, but if you want to adjust its options, for example suggestions sorting, you will have to set filesystem permissions for the files and directories mentioned in error details (666 for all files, 777 for all directories).

 

Step 2. Update your theme CSS file with the following new styles:

White skin (in KVS default theme you should update /static/styles/all-responsive-white.css file on FTP):

.autocomplete-suggestions { border: 1px solid #999; background: #fff; overflow: auto; margin: 0 -60px 0 13px; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #276fdb; border-bottom: 1px solid #276fdb; }
.autocomplete-group { padding: 5px; font-weight: bold;}
.autocomplete-group strong { display: block; }

Dark skin (in KVS default theme you should update /static/styles/all-responsive-metal.css file on FTP):

.autocomplete-suggestions { border: 1px solid #1b1b1b; background: #000; overflow: auto; margin: 0 -60px 0 13px; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.autocomplete-selected { background: #151515; }
.autocomplete-suggestions strong { font-weight: normal; color: #276fdb; border-bottom: 1px solid #276fdb; }
.autocomplete-group { padding: 5px; font-weight: bold;}
.autocomplete-group strong { display: block; }

You may need to adjust these styles later for better matching your site colors. But initially you can adjust #276fdb color, which refers to light blue highlight color on the above screenshots.

 

Step 3. Go to Website UI -> Language files -> default and add the following texts at the end:

urls.search_suggestions = /search_suggestions.php

search_suggestions.similar_videos = Videos
search_suggestions.similar_albums = Albums
search_suggestions.similar_models = Models
search_suggestions.type = searches

The last option may be set to one of these values: searches (similar search mode) and mixed (content mode).

 

Step 4. Go to Website UI -> Page Components -> include_footer_general.tpl and add the following code right before the closing </body> tag:

<script src="{{$config.statics_url}}/static/js/jquery.autocomplete.min.js"></script>
<script>
   {{if $lang.search_suggestions.type!='none' && $lang.urls.search_suggestions}}
       $('#search_form input[type="text"]').autocomplete({
           minChars: 3,
           deferRequestBy: 100,
           serviceUrl: '{{$lang.urls.search_suggestions}}',
           {{if $lang.search_suggestions.type=='mixed'}}groupBy: 'type',{{/if}}
           paramName: 'q',
           onSelect: function(suggestion) {
               if (suggestion && suggestion.data && suggestion.data.url) {
                   window.location = suggestion.data.url;
               }
           }                                         
       });
   {{/if}}
</script>

NOTE: if you theme is not KVS default theme, then you may need to change this selector to match your theme search input:

#search_form input[type="text"]

 

Step 5. If you need adjustments and customizations, you may want to check with plugin official documentation.

Suggestions are configured to be max 20 per group and their sorting is set to popularity (most popular first). If you want to adjust these parameters, just go to Website UI -> Pages -> Search Suggestions for the needed controls.

[Tech Support]

Updated this guide to have search suggestions redirect to video / album / model / search page immediately when clicked.

In order to merge the new functionality into your theme, please go to Website UI -> Theme settings:

• If it says KVS Default (8.2) or above, you already have this, search suggestions should already be clickable.
• If it says KVS Default (7.6) or above less than 8.2:
  Step 1. Download this archive and unpack on top of your project FTP:
  https://kernel-scripts.com/updates/search_suggestions.zip
  Step 2. Update this file in your project FTP:
  https://kvs-demo.com/static/js/main.min.js
• If it says other theme or version, please repeat Step #1 and Step #4 from the above guide.