Create a new resource at the root of the tree

Today is a lesson on how to implement site search in Modx Revolution using the SimpleSearch component.

Basic snippet parameters:

1. SimpleSearch

2. We solve various problems with encodings, etc.

Go to core/components/simplesearch/model/simplesearch/simplesearch.class.php and replace the following lines in it:

line 297:

$text = preg_replace("/(\[\[\+.*?\]\])/i", "", $text);

replace with

$text = preg_replace("/(\[\[\+.*?\]\])/iu", "", $text);

line 311:

$text = trim(preg_replace("/\s+/", " ", $this->sanitize($text)));

replace with

$text = trim(preg_replace("/\s+/u", " ", $this->sanitize($text)));

line 413:

$string = preg_replace("/" . $quoteValue . "/i", "$0", $string);

replace with

$string = preg_replace("/" . $quoteValue . "/iu", "$0", $string);

Let's comment out line 179:

If (!empty($str)) $this->searchString = strip_tags($this->modx->sanitizeString($str));

those. it should look like this

/*if (!empty($str)) $this->searchString = strip_tags($this->modx->sanitizeString($str)); */

3. Make copies of all standard chunks that are located in the directory core/components/simplesearch/elements/chunks/

We create new chunks with the same names and the prefix -new, and the same contents (only they are no longer file-based, but regular), for which you will understand all this further.

For example, we take the first chunk currentpagelink.chunk.tpl and create a new chunk currentpagelink-new (elements - create a new chunk) and transfer the code to it.

[[+text]]

Responsible for controlling the button in pagination for the active page.

And in the same way we create the remaining chunks:

— pagelink-new — is responsible for displaying a separate pagination button.

[[+text]]

• [[+link]] - link to document
• [[+text]] - document number

— searchform-new — search form

[[%sisea.search? &namespace=`sisea` &topic=`default`]]

- searchnoresults can not be transferred - there is no design there;

— searchresult-new — output of each result item.

[[+idx]]. [[+pagetitle]]

[[+extract]]

• [[+idx]] - search result number in the list
• [[+link:is=``:then=`[[~[[+id]]]]`:else=`[[+link]]`]]
• [[+longtitle]] - extended title
• [[+pagetitle]] - title
• [[+extract]] - the text by which this document was found

- searchresultli - in fact, it can also not be transferred.

- searchresults-new - wrapper of all results

[[+resultInfo]]

• [[+resultInfo]] - information about the number of documents found and for what phrase.
• [[+sisea.result_pages? &namespace=`sisea` &topic=`default`]]

  Displaying the phrase “Search results pages:”

• [[+paging]] - pagination
• [[+results]] - search results

After all this, you should have 5 new chunks.

4. Create a new document on which search results will be displayed

Title: Search results, check the “Do not show in menu” checkbox. Go to “Settings” and uncheck the “Searchable” and “Use HTML editor” checkboxes. Save. We refresh the page and add it to the content

[[!SimpleSearch? &tpl=`searchresult-new` &containerTpl=`searchresults-new` &pageTpl=`pagelink-new` ¤tPageTpl=`currentpagelink-new`]]

design chunks that were created in step 3 (appearance).

If you want the search results to include pictures, then add them at the end of this output

&includeTVs=`1` &processTVs=`1`

In the searchresult chunk, the image can be called like this: [[+img]].

5. Display the search form

In the place where you need to display the search form, write

[[!SimpleSearchForm? &landing=`11` &tpl=`searchform-new`]]

Here landing is the id of the page with search results, in tpl are the form design chunks that were created in step 3.

We did steps 4 and 5 so that you could edit the external design at your discretion: the form itself, search results, etc. without getting into the sources. And the standard design is quite sad; for example, this is what the standard search form looks like.

6. We change the design.

I don’t see the point in describing how to design all the chunks; as an example, I’ll give a new design for the searchform-new chunk

This is the usual standard form markup from Bootstrap 3, on the site it looks like this:

Official documentation here: docs.modx.com/extras/revo/simplesearch

If you have questions, write and ask them in the comments.

SimpleSearch is a standard package for site search in modx revolution. We will add an ajax request to it for live search. An example can be seen on the same site; it works quite simply and, mind you, with pagination. The SimpleSearchForm snippet (search form) requests an ajax request from a separate results page, which displays the SimpleSearch snippet.

1 Download the popular SimpleSearch site search package from the modx revo repository and install it.
We create a resource with an empty template for ajax to collect data and send it when making requests in the search form.
For example, let’s call the alias “search-results” and it will be accessed by ajax.
Resource contents:

search results if(typeof jQuery !== undefined) ( $(document).ready(function() ( $(".sisea-page a").click(function(event) ( // pagination event.preventDefault(); // Prevents the browser from navigating through pages // Loads the next search page and shows the container $("#site-search-results").load($(this).attr("href")).show(); // stub )); )) [[!SimpleSearch]]

2 Now let’s place the search form in a place convenient for you, the snippet “SimpleSearchForm” is responsible for this.
As a rule, the search form is shoved into modx templates.
The div element displays the results of the ajax request.

[[!SimpleSearchForm]]

3 Let’s connect ajax to send requests from the form to the page we created in step 1.
(!) Don't forget to connect jquery
(!) Make sure at what address ajax accesses the resource. The load() method is responsible for this in 2 places.

// SimpleSearch ajax $(document).ready(function() ( // Button $(".sisea-search-form").submit(function () ( // uncomment if you need a button // $("#site- search-results").load("/search-results/",$(".sisea-search-form").serialize()).slideDown("fast"); return false; )); // Live search $(".sisea-search-form input").keyup(function() ( if(this.value.length > 2) ( // User types more than 2 characters in the search string // hides/shows results outside the window $(document).click(function(event)( // hide if ($(event.target).closest(".site-search-results").length) return; $(".site-search-results" ).slideUp("fast"); //event.stopPropagation()); $("#search").click(function() ( // display $(".site-search-results").slideDown ("fast"); return false; )); // ajax request loading search results from the page and displaying the container $("#site-search-results").load("/search-results/",$(". sisea-search-form").serialize()).slideDown("fast"); ) else ( // If less than 2 characters are typed, hide the container (CSS display:none;) $("#site-search-results" ).slideUp("fast"); ) )); ));

4 We connect css to display the results of the ajax effect of hiding and revealing the window and its necessary display styles, all to a minimum. Complete the rest of the styles yourself as described in the manual of the SimpleSearch package in modx revolution.

/* SimpleSearch ajax */ .site-search-results ( display:none; position:absolute; text-align:left; padding:15px; background:#F7F7F7; border-radius:5px; -webkit-border-radius:5px ; -moz-border-radius:5px; box-shadow: 2px 3px 9px -2px rgba(50, 50, 50, 0.55); 0.55); -moz-box-shadow: 2px 3px 9px -2px rgba(50, 50, 50, 0.55);

The search button in the SimpleSearchForm snippet can be removed altogether
since ajax already intercepts pressing the Enter button.

This snippet displays search results based on the search criteria sent.

Simply place the snippet in the Resource you would like to display search results in.

[[!SimpleSearch]]

There are 4 chunks that are processed in SimpleSearch. Their corresponding SimpleSearch parameters are:

• tpl - The Chunk to use for each result displayed.
• containerTpl - The Chunk that will be used to wrap all the search results, pagination and message.
• pageTpl - The Chunk to use for a pagination link.
• currentPageTpl - The Chunk to use for the current pagination link.

Searching custom tables is available in SimpleSearch using the &customPackages property; however, you must have a custom package built for it. The format is:

ClassName:fieldName(s):packageName:packagePath:joinCriteria||class2Name:fieldName(s):package2Name:package2Path:join2Criteria

In other words, each custom package is separated by ||. Then, each part of it is separated by colons (:). An example to search Quip comments:

&customPackages=`quipComment:body:quip:(core_path)components/quip/model/:quipComment.resource = modResource.id`

Let's break down each part:

• className - The class name of the table you want to search. Here, it's QuipComment.
• fieldName(s) - A comma-separated list of column names to search. We did "body", you could also have done "body,email" or whatever.
• packageName - The name of the schema Package to add. This one is called quip.
• packagePath - The path to the model/ directory where the package is located.
• joinCriteria - The SQL to join the table you want to search and the modResource table. Your table must have some connection to the Resource it"s on (otherwise SimpleSearch won"t know how to load a URL for it!)

Once you"ve added it, it will search those fields as well for data. If it finds it in that table, it will display the result as a link to the Resource you specified in your joinCriteria. In our example, that would be the resource the Quip comment is located on.

Today is a lesson on how to implement site search in Modx Revolution using the SimpleSearch component.

Basic snippet parameters:

1. SimpleSearch

2. We solve various problems with encodings, etc.

Go to core/components/simplesearch/model/simplesearch/simplesearch.class.php and replace the following lines in it:

line 297:

$text = preg_replace("/(\[\[\+.*?\]\])/i", "", $text);

replace with

$text = preg_replace("/(\[\[\+.*?\]\])/iu", "", $text);

line 311:

$text = trim(preg_replace("/\s+/", " ", $this->sanitize($text)));

replace with

$text = trim(preg_replace("/\s+/u", " ", $this->sanitize($text)));

line 413:

$string = preg_replace("/" . $quoteValue . "/i", "$0", $string);

replace with

$string = preg_replace("/" . $quoteValue . "/iu", "$0", $string);

Let's comment out line 179:

If (!empty($str)) $this->searchString = strip_tags($this->modx->sanitizeString($str));

those. it should look like this

/*if (!empty($str)) $this->searchString = strip_tags($this->modx->sanitizeString($str)); */

3. Make copies of all standard chunks that are located in the directory core/components/simplesearch/elements/chunks/

We create new chunks with the same names and the prefix -new, and the same contents (only they are no longer file-based, but regular), for which you will understand all this further.

For example, we take the first chunk currentpagelink.chunk.tpl and create a new chunk currentpagelink-new (elements - create a new chunk) and transfer the code to it.

[[+text]]

Responsible for controlling the button in pagination for the active page.

And in the same way we create the remaining chunks:

— pagelink-new — is responsible for displaying a separate pagination button.

[[+text]]

• [[+link]] - link to document
• [[+text]] - document number

— searchform-new — search form

[[%sisea.search? &namespace=`sisea` &topic=`default`]]

- searchnoresults can not be transferred - there is no design there;

— searchresult-new — output of each result item.

[[+idx]]. [[+pagetitle]]

[[+extract]]

• [[+idx]] - search result number in the list
• [[+link:is=``:then=`[[~[[+id]]]]`:else=`[[+link]]`]]
• [[+longtitle]] - extended title
• [[+pagetitle]] - title
• [[+extract]] - the text by which this document was found

- searchresultli - in fact, it can also not be transferred.

- searchresults-new - wrapper of all results

[[+resultInfo]]

• [[+resultInfo]] - information about the number of documents found and for what phrase.
• [[+sisea.result_pages? &namespace=`sisea` &topic=`default`]]

  Displaying the phrase “Search results pages:”

• [[+paging]] - pagination
• [[+results]] - search results

After all this, you should have 5 new chunks.

4. Create a new document on which search results will be displayed

Title: Search results, check the “Do not show in menu” checkbox. Go to “Settings” and uncheck the “Searchable” and “Use HTML editor” checkboxes. Save. We refresh the page and add it to the content

[[!SimpleSearch? &tpl=`searchresult-new` &containerTpl=`searchresults-new` &pageTpl=`pagelink-new` ¤tPageTpl=`currentpagelink-new`]]

design chunks that were created in step 3 (appearance).

If you want the search results to include pictures, then add them at the end of this output

&includeTVs=`1` &processTVs=`1`

In the searchresult chunk, the image can be called like this: [[+img]].

5. Display the search form

In the place where you need to display the search form, write

[[!SimpleSearchForm? &landing=`11` &tpl=`searchform-new`]]

Here landing is the id of the page with search results, in tpl are the form design chunks that were created in step 3.

We did steps 4 and 5 so that you could edit the external design at your discretion: the form itself, search results, etc. without getting into the sources. And the standard design is quite sad; for example, this is what the standard search form looks like.

6. We change the design.

I don’t see the point in describing how to design all the chunks; as an example, I’ll give a new design for the searchform-new chunk

This is the usual standard form markup from Bootstrap 3, on the site it looks like this:

Official documentation here: docs.modx.com/extras/revo/simplesearch

If you have questions, write and ask them in the comments.