Adding Autocomplete To Your NextJS Applications With Atlas Search

1
git clone https://github.com/mongodb-developer/search-nextjs/
2
cd search-nextjs

1
cd backend
2
npm install
3
touch .env

1
PORT=5050
2
MONGODB_URI=<CONNECTION_STRING>

1
npx nodemon .

1
cd ../mdbsearch
2
npm install
3
touch .env

1
NEXT_PUBLIC_BASE_URL=http://localhost:5050/

1
npm run dev

1
// Search endpoint goes here
2
app.get("/search/:search", async (req, res) => {
3
  const queries = JSON.parse(req.params.search)
4
 // Aggregation pipeline goes here
5
 });

1
// Start building the search aggregation stage
2
let searcher_aggregate = {
3
    "$search": {
4
      "index": 'search_home',
5
      "compound": {
6
        "must": [
7
          // get home where queries.category is property_type
8
        { "text": {
9
          "query": queries.category,
10
          "path": 'property_type',
11
          "fuzzy": {}
12
        }},
13
14
// get home where queries.country is address.country
15
        {"text": {
16
          "query": queries.country,
17
          "path": 'address.country',
18
          "fuzzy": {}
19
        }}
20
      ]}
21
    }
22
  };

1
app.get("/search/:search", async (req, res) => {
2
 const queries = JSON.parse(req.params.search)
3
  // Start building the search aggregation stage
4
  let searcher_aggregate = { ...  };
5
  // A projection will help us return only the required fields
6
  let projection = {
7
          '$project': {
8
            'accommodates': 1,
9
            'price': 1,
10
            'property_type': 1,
11
            'name': 1,
12
            'description': 1,
13
            'host': 1,
14
            'address': 1,
15
            'images': 1,
16
            "review_scores": 1
17
          }
18
        };
19
 });

1
app.get("/search/:search", async (req, res) => {
2
  const queries = JSON.parse(req.params.search)
3
   // Start building the search aggregation stage
4
  let searcher_aggregate = { ... };
5
  // A projection will help us return only the required fields
6
  let projection = { ... };
7
  // We can now execute the aggregation pipeline, and return the first 50 elements
8
  let results = await itemCollection.aggregate([ searcher_aggregate, projection ]).limit(50).toArray();
9
  res.send(results).status(200);
10
 });

1
//Search function goes here
2
    const searchNow = async (e) => {
3
        setshow(false)
4
        let search_params = JSON.stringify({
5
            country: country,
6
            category: `${activeCategory}`
7
        })
8
        setLoading(true)
9
        await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}search/${search_params}`)
10
            .then((response) => response.json())
11
            .then(async (res) => {
12
                updateCategory(activeCategory, res)
13
                router.query = { country, category: activeCategory };
14
                setcountryValue(country);
15
                router.push(router);
16
            })
17
            .catch((err) => console.log(err))
18
            .finally(() => setLoading(false))
19
    }

1
  const handleChange = async (e) => {
2
  //Autocomplete function goes here
3
 setCountry(e.target.value);
4
}

1
//Country autocomplete endpoint goes here
2
app.get("/country/autocomplete/:param", async (req, res) => {
3
  let  results = await itemCollection.aggregate(
4
      [
5
        {
6
          '$search': {
7
            'index': 'country_autocomplete',
8
            'autocomplete': {
9
              'query': req.params.param,
10
              'path': 'address.country',
11
            },
12
            'highlight': {
13
              'path': [ 'address.country']
14
            }
15
          }
16
        }, {
17
          '$limit': 1
18
        }, {
19
          '$project': {
20
            'address.country': 1,
21
            'highlights': {
22
              '$meta': 'searchHighlights'
23
            }
24
          }
25
        }
26
      ]).toArray();
27
28
  res.send(results).status(200);
29
 });

1
//Autocomplete function goes here
2
    const handleChange = async (e) => {
3
            setCountry(e.target.value);
4
            if(e.target.value.length > 1){
5
                await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}country/autocomplete/${e.target.value}`)
6
                .then((response) => response.json())
7
                .then(async (res) => {
8
                    setsug_countries(res)
9
                })
10
            }
11
            else{
12
                setsug_countries([])
13
            }
14
    }