MENU

Search Form Autocomplete

  Previous article

Website visitors can quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
Based on the jQuery Autocomplete plugin. More documentation at Autocomplete | jQuery.

  How to use

 1. Search Form Template

Create in Design Manager a new Search Form template and name it "SearchAutocomplete".

In the default content change the ID's for the label and the text input field "{$search_actionid}searchinput" to "autocomplete" or "autocomplete_initial".
The content will now look like:

{$startform}
<label for="autocomplete">{$searchprompt}:&nbsp;</label><input type="text" class="search-input" id="autocomplete" name="{$search_actionid}searchinput" size="20" maxlength="50" placeholder="{$searchtext}"/>
{*
<br/>
<input type="checkbox" name="{$search_actionid}use_or" value="1"/>
*}
<input class="search-button" name="submit" value="{$submittext}" type="submit" />
{if isset($hidden)}{$hidden}{/if}
{$endform}

 2. User Defined Tag to read the database

In the Admin Area you go to Extensions >> User Defined Tags.

Create a new UDT, named "SearchAutocomplete" and the content is:

/**
 * https://cmscanbesimple.org/blog/search-form-autocomplete
 * https://demo.cmscanbesimple.org/search-form-autocomplete
 * https://jqueryui.com/autocomplete/
 */


$db = cmsms()->GetDb();
$query = "SELECT DISTINCT `word` FROM " . cms_db_prefix() . "module_search_index ORDER BY `word`";
$result = $db->GetCol( $query );

if ( count($result) )
{
  $output = '<script>
  window.onload = function() {
    var tags = '
. json_encode($result) . ';

    $( "#autocomplete" ).autocomplete( {
      minLength: 0,
      source: tags
    } );

    $( "#autocomplete_initial" ).autocomplete( {
      minLength: 0,
      source: function( request, response ) {
        var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( tags, function( item ) {
          return matcher.test( item );
        } ) );
      }
    } );

  };
  </script>'
;

  echo $output;
}

 3. jQuery User Interface

This method uses the jQuery UI Autocomplete library.
Add to your template <head></head> area:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

And add this to the bottom of your Core::Page template.

<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

{SearchAutocomplete}

Note, maybe other modules also use these. Don't add them twice, it will break the functioning of your website.

 4. Search module

Now you can add the Search module tag to your Core::Page template or a page.

{Search formtemplate='SearchAutocomplete'}

  Working example



  Show related articles:


  Comment Form

Click here to open the form


  0 Comments

No comments yet...

CMS Made Simple - Tutorials, tips and tricks - CMSMS

Search Form Autocomplete

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.7
  Last updated: 13-06-2018
  Comments: 0
  http://cms.ms/3lbW

Advertisement



Ads help me to help you! Thanks!

Ads help me to help you! Thanks!

Ads help me to help you! Thanks!