Definitely worth learning JS, but if you’d like to share your repo I’d be happy to have a look?
@lb13
That would be appreciated.
I attempted to change “tags” to “activities”. Apologies if I have made a mess of things.
I used a partial named “search-2.html” for this experiment.
On first pass, it looks like you’ve copied over my example in full, which includes references to the page section (parent directory) which doesn’t appear in your JSON template - if you take out those references in the search-2 partial then it should probably work again.
My understanding of JS is very poor (close to none).
Staring at the partial, I don’t think it is possible for me to make those changes.
I have some learning to do.
Thank you for your time. 
UPDATE: While editing the JS in any meaningful way wasn’t happening, I did manage to revert to something similar to your original code and adapt the json file. The end result is very satisfying.
You can see the search in operation here: outlearn.co.uk
Thanks for sharing your code.
1 Like
Glad you found a way to make it work - site looks very nice!
Thank you.
Is it also possible to add a search to another page and search a separate section?
For example, I have a section named group activities. Could I place a search box on that page and search just the group activity section?
I assume I would need a second json file, but not sure how to generate it?
UPDATE:
I figured it out…
For anyone looking to do something similar…
I added…
section = ["HTML", "RSS", "JSON"]
…to my config file and placed a slightly adapted list.json file in the section folder (group activities), created a modified (section specific) partial, and the json file was generated under …/group-activities/index.json
I hope that helps someone.
@lb13 I wonder if you could help me to solve an issue.
Your search is working amazingly and has led me to pursue more avenues with the website.
However, I added a taxonomy called services to your search, unusually the terms are written in the format “birmingham/basketry”.
I managed to display my services in the search results, but I have not been able, so far, to display only the last part of the service. Ideally, it would just state “service: basket making”
I tried using pathBase which worked elsewhere on the site, but I can’t get it to work here.
this is the current code in the .JSON file:
{{/* layouts/outdoor-activities-directory/index.json */}}
{{- $index := slice -}}
{{- range .Pages -}}
{{- $index = $index | append (dict "title" ( .Title | plainify ) "permalink" .Permalink "cities" ( .Params.cities ) "services" ( .Params.services ) ) -}}
{{- end -}}
{{- $index | jsonify -}}
I tried:
{{/* layouts/outdoor-activities-directory/index.json */}}
{{- $index := slice -}}
{{- range .Pages -}}
{{- $index = $index | append (dict "title" ( .Title | plainify ) "permalink" .Permalink "cities" ( .Params.cities ) "services" ( .Params.services | path.Base ) ) -}}
{{- end -}}
{{- $index | jsonify -}}
…but i got:
execute of template failed at <path.Base>: error calling Base: unable to cast []string{"birmingham/basketry"} of type []string to string
Are you able to advise please?
Can you point me to an example in your repo? I tried having a look myself but couldn’t see any pages using the services taxonomy.
Yes. No problem.
For a live example of the website:
https://stirring-pithivier-e50bbf.netlify.app/outdoor-activities-directory/birmingham/
Thank you.
Replace the last loop in your partial called search-directory.html with the code below - might not be the best way of doing it, but should work.
// For each of the pages in the final filtered list, insert into the results list
filteredPages.forEach(function(page) {
// Declare empty string to hold list of applicable services
let servicesText = '';
// Make sure that services are included for page
if (page.services.length > 0) {
// For each service, trim off text left of forward slash (and the forward slash itself) - add a comma-space separator
page.services.forEach(function(service) {
servicesText += service.substring(service.indexOf("/")+1,99) + ", ";
})
};
// Trim off the final comma-space separator
servicesText = servicesText.substring(0,servicesText.length-2)
results.insertAdjacentHTML("beforeend","<li class='elbi-results-item'><h2 style='font-size: 1.5rem;'><a href='" + page.permalink + "'>" + page.title + "</a></h2><div><p style='margin:0;text-align:right;'>City: " + page.cities + "</p><div><p style='margin:0;text-align:right;'>Services: " + servicesText + "</p></div></li>");
// if (display_score == true) {
// results.insertAdjacentHTML("beforeend","<p>Result score: " + page.score + "</p>")
// };
}); // end of page for loop
1 Like
Brilliant! It worked! Thank you so much for taking the time to do that for me, and for a fantastic search tool.
1 Like
I just wanted to post to thank @lb13 for this tip. I am implemented this approach, slightly modified, on one of my websites here: Search - Filmgarb.com
Thank you!
1 Like
I like your site search solution. But I noticed that the X close icon doesn’t show up in Firefox. How can I fix this? How can we show a X close icon in Firefox?
Anyone?
This is because the input type ‘search’ isn’t implemented by Mozilla. I think they probably have a good rationale, and to be honest my use of it was a bit lazy. A better solution would be based on some actual HTML elements with an event listener, so that would be my suggestion.
Okay, Thank you for your answer
I am getting this error in the console.
Uncaught SyntaxError: Invalid or unexpected token (at (index):210:62)
Which points to <li class='elbi-results-item'>.
Is it possible to add a function to make the search show results with words that are not in the title or description, but mean the same, like for example, someone types PS5 in the search bar and the search will also show pages with only the word PlayStation 5 in the title and description. I’m not talking about tags. I’m just looking for a way to add something that will show all pages that have the word “PlayStation 5” in the title and description – even if someone types only “PS5”. Even if I need to add this option per word PlayStation 5 = PS5 or PS5 = PlayStation 5.