Jump to content
kkalgidim

Help about searching method

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...