Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2024-01-16 19:37:16

raminrahimi
Member
From: India
Registered: 2013-03-19
Posts: 276

Ajax search with showing article thumbnail

I am developing a website for my client he is listing the items for sale, now I have a search block and he asking me to make that Ajax search user-friendly for visitors, like if someone types Book the search will show the available items (article title + thumbnail) when clicked any item that will open directly that item.
I tried to find any plugin or solution, but couldn’t succeed. Anyone please help me in this regard?
Thanks in advance
Here is an example

Offline

#2 2024-01-16 19:52:37

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,596
Website

Re: Ajax search with showing article thumbnail

I think Oleg’s etc_search will do that for you using the “live search” option. Include the image in the code in the form for your search results.


TXP Builders – finely-crafted code, design and txp

Offline

#3 2024-01-17 16:52:27

etc
Developer
Registered: 2010-11-11
Posts: 5,054
Website GitHub

Re: Ajax search with showing article thumbnail

If you use only standard txp search fields (Title/Body) and do not need live ‘on input’ search, this is quite easy to do without any plugin, especially with jQuery. Say, your search page contains

<form id="search_form" action="this/page/url">
    <input type="search" name="q" />
</form>

<div id="search_results">
    <txp:article />
</div>

Then it suffices to add a bit of (jQuery) js:

$(function () {
	$("#search_form").on("submit", function(e) {
		e.preventDefault();
		let url = $(this).attr("action"), data = $(this).serializeArray();
		$("#search_results").load(url +" #search_results>*", data);
	});
});

Untested, but surely works after some tweaking

Offline

Board footer

Powered by FluxBB