0

I have a search results page that displays 10 results from an array of JSON objects based on what the user entered into thier search.

Currently the order in which they display is the same as the appear in the file. Is there a way to order my results with the closest match first and then second closest second and so on.

So I essentially need to order the array by the same kind of filter I used for the id.

** I understand that by using text several times it wont work as effectively **

Heres the component:

import *  as React from 'react';
import { useParams } from "react-router-dom";
import { content } from "./reviews";
import { Link } from "react-router-dom";

export default function Results() {
    //Extracts ID from URL
    const {id} = useParams();
    
    return (
        <div className="mx-2 my-16 lg:w-[60%] lg:m-auto pt-0.5 lg:py-16 sm:px-3 bg-neutral-200">
            <h3 className="bg-red-500 font-bold text-white px-4 py-0.5">Showing results for: {id}</h3>

            {content
            //Filter through JSON
                .filter((content) => {
                    //If any input characters much object characters return corresponding object
                    if (
                        content.name.toLowerCase().includes(id.toLocaleLowerCase())
                    ) {
                        return content;
                    }
                })
                
                //Maps element based on the number of JSON objects
                .map((content, index) => {
                    return (
                        index < 10 && (
                            <Link to={content.link}>
                                <a href={content.link}>
                                    <div id="thumbnail" className="flex flex-row py-4 px-3 bg-white border-b-2 border-red-300 space-x-4">
                                        <Link to={content.link} className="w-2/5 sm:w-1/3 lg:mr-0 rounded-sm">
                                            <img src={content.image} alt="Review thumbnail"></img>
                                        </Link>
                                        <div className="md:flex md:flex-col space-y-2">
                                            <h5 className="font-bold ">{content.heading}</h5>
                                            <p>{content.text}</p>
                                        </div>
                                    </div>
                                </a>
                            </Link>
                        )
                    );
                })
            };
        </div>
    );
};

Heres the JSON array:

export const content = [
    {link: "/review/elden-ring", name: "Elden\nRing", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text1", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text2", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text3", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text4", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text5", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text6", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text7", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text8", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text9", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text10", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
    {link: "/review/elden-ring", name: "text11", image: '../images/elden-ring-thumbnail.jpg', heading: 'text1', text: 'text1'},
];
Josh Haywood
  • 43
  • 5
  • Do you have a way to define "closest match"? Or is that what you're asking how to do? – mhodges Mar 21 '22 at 15:39
  • Thats what im asking to do – Josh Haywood Mar 21 '22 at 15:41
  • Take a look at https://stackoverflow.com/questions/11919065/sort-an-array-by-the-levenshtein-distance-with-best-performance-in-javascript – James Mar 21 '22 at 15:43
  • 3
    Since all the names start with "text" there will be no "closest match" until you enter the fifth character. They will _all_ be closest matches up to that point. – Andy Mar 21 '22 at 15:44
  • 1
    When you look for "tion", then how would you order the following matches? "nationality", "international", "nationwide", "interruptions", "distinctions", "capitalisation", "petitioning". Let us know which is the priority rule... Different people will have different opinions on this. – trincot Mar 21 '22 at 15:51
  • Yeah I understand I should have named them differently but ill look at the link you provided @Andy – Josh Haywood Mar 21 '22 at 15:54

0 Answers0