Help about searching method

[kkalgidim]

Hi,

I am trying to implement a search section for a project

Can any body tell me about this search method of the site . Link below

https://www.qunomedical.com/en/

I think its called morping search

It cover screen and filter results by characters you type.

It lookslike live search i think. Is there any module for processwire? I found Ajax search module by @Soma 

If anybody show me a way about this i will be appricate.

 

[dragan]

If you're brave enough, you could try to clone the admin search module: /wire/modules/Process/ProcessPageSearch/

rename it and put it under site/modules/ - you would have to alter rights (the admin search requires edit-rights) and certainly some other stuff.

The way I did it once, is:

http://www.runningcoder.org/jquerytypeahead/ - for autosuggest / type-ahead functionality

$(document).ready(function () {
	$.typeahead({
		input: '#q',
		hint: true,
		maxItem: 20,
		order: "asc",
		cache: 'localStorage',
		ttl: 3600000,           // 1 hour
		display: ["title", "vertec", "year", "project_desc_short"],
		source: {
			url: 'https://prototypes.domain.com/project-abc/autocomplete/json/' // Ajax request to get JSON from the action url
		},
		callback: {
			onResult: function (node, query, result, resultCount, resultCountPerGroup) {
				$('#resultCountIndicator').text(resultCount + " hits");
			},
			onCancel: function (node, event) {
				$('#resultCountIndicator').text('');
			},
			// Redirect to url after clicking or pressing enter
			onClickAfter: function () {
				var keyword = $('#q').val();
				window.open(
					'https://prototypes.domain.com/project-abc/search-results/?search-type=text&keyword=' + keyword,
					'_blank'
				);
			}
		}
	});

});

To optimize performance, I created a hook or cron job: Store all the searchable fields in JSON format in one special PW page. That's the autocomplete/json above in source url.

This special template has URL segments enabled:

<?php namespace ProcessWire;

ini_set('max_execution_time', 600); // 10 minutes
ini_set('memory_limit', '256M');

// update process triggered (here it's done manually - it's just a normal link in the admin dashboard)
if ($input->urlSegment1 === 'update') {
    $selector = "parent=1041, has_parent!=2, include=all";
    $matches  = $pages->findMany($selector);
    foreach ($matches as $match) {
        $result    = array(
            "title"              => $match->title,
            "year"               => $match->year,
            "client_name"        => $match->client_name,
            "vertec"             => $match->vertec,
            "project_desc_short" => htmlspecialchars_decode(strip_tags($match->project_desc_short)),
        );
        $results[] = $result;
    }

    header("Content-type: text/html; charset=UTF-8");
    echo "<p>New autocomplete JSON is being generated...</p>";
    $content = json_encode($results);
    $page->setOutputFormatting(false);
    $page->autocomplete_json = json_encode($results);
    $page->save();

    $resCount = count($results);
    $url      = $page->url . "json";
    echo "<p>et puis voilà: $resCount projects found in <a href='$url' target='_blank'>JSON</a></p>";

}

// just output the generated JSON to the frontend (JS)
if ($input->urlSegment1 === 'json') {
    header("Content-type: application/json; charset=UTF-8");
    echo $page->autocomplete_json;
}

In other words, I generate a JSON that holds all the infos I need. I only query PW directly, when something has been updated.

The fullscreen thingy you mention is just plain CSS, I guess.

[kkalgidim]

Thanks for reply @dragan

I will try my chance

What i understand from your post is. There is 2 way i can do this search system.

1. Admin search module /wire/modules/Process/ProcessPageSearch/

2. http://www.runningcoder.org/jquerytypeahead/ - for autosuggest / type-ahead functionality

right? 

[dragan]

Well, there's certainly more ways than just two. These are only suggestions. I would try out Soma's module first. I don't remember if it uses autocomplete as well. Maybe you can use it as a starting point, and adjust CSS/JS as you need.

If you search, you'll find tons of examples to do a fullscreen-search-on-focus, e.g. https://bootsnipp.com/snippets/997jD

[AndZyk]

Hello @kkalgidim,

if you already use jQuery, I also can recommend jQuery Typeahead by Running Coder. I wrote a tutorial for a autocomplete search function with this plugin:

It is basically the same like the code by @dragan, with a little more information.

Of course you could use any typeahead plugin or service you want and build a nice search function with ProcesWire. All you have to do is prepare the search results in the required format of the plugin or service, f.e. JSON. ?

Regards, Andreas