Create a search app with Azure Cognitive Search
Tags: azuresearch, azure, cognitiveservices
Published: 2019-12-09 10:48:53

---
title: Create a search app with Azure Cognitive Search
published: true
description: This is a blog post about the creation of a website that benefits from the Azure Cognitive Search power!
tags: azuresearch, azure, cognitiveservices
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m7e822xz2axuuu81vsaj.png
---

> This article is part of the Azure Advent Calendar initiative by [Richard Hooper](https://twitter.com/Pixel_Robots/) and [Gregor Suttie](https://twitter.com/gregor_suttie/). You'll find other helpful articles published daily by community members [here](https://azureadventcalendar.com/), so make sure to check it out every day. Furthermore, 3 videos are uploaded every day, and you can check the full playlist [here](https://www.youtube.com/playlist?list=PLaGfA5qEcV9LFE7-xLzm-kUELDAtLGIEx). Follow the conversation with the hashtag [#AzureAdventCalendar](https://twitter.com/hashtag/azureadventcalendar).

Azure Cognitive Search is a powerful service that you can use to find useful information in your data, even unstructured data such as pdf files, Office docs and images. Moreover, you can seamlessly integrate AI capabilities, known as cognitive skills, to enrich your apps and extract even more information.

In [my video entry](
https://www.youtube.com/watch?v=15Vpd7bSNM0) for the Azure Advent Calendar I explained what Azure Cognitive Search is. For the demo, I created a resource on the portal and integrated it into a real website in order to perform smart queries on a video game music library.

In this article I'm explaining how to quickly create a website based on your Azure Cognitive Search resource settings.

First of all, access your Azure Cognitive Search resource, click on Indexes and then access the index that you created before.
![Step 1](https://thepracticaldev.s3.amazonaws.com/i/fmv2u8xdlt9ajm7pk4we.png)

Next, click on the Create Search app (preview) button.
![Step 2](https://thepracticaldev.s3.amazonaws.com/i/7oaodov5h9nr4w6yo7fb.png)

Most probably, you'll receive a message about enabling CORS in order to be able to use the index for your queries. Check the option and click on the button.
![Step 3](https://thepracticaldev.s3.amazonaws.com/i/kikxxfb2jxwdbir2b4ad.png)

Now, let's configure the application. On the Individual result section you can customize the appearance of each result. In this case, I don't have a field for images, so I leave blank the thumbnail part. On the right side, I assign the OriginalTitle field for the Title part and the OriginalGame field for the Description part.
![Step 4](https://thepracticaldev.s3.amazonaws.com/i/mkaegminuks75f819q6p.png)

The next section is the Sidebar. You can filter results by facetables (categories) for any field that you marked as facetable when you created the index. For this specific scenario, I choose OriginalGame to group/filter songs by video game:
![Step 5](https://thepracticaldev.s3.amazonaws.com/i/j6ksx9v09r8ed1uqqnhg.png)

Coming up is the Suggestions section. You can choose which fields would appear as auto-complete recommendations when the user types in the search box. I selected OriginalTitle and OriginalGame with the Normal and Inline with Previous Field styles, respectively:
![Step 6](https://thepracticaldev.s3.amazonaws.com/i/hrv8m0tz07osgnvougey.png)

Finally, click on the Create Search App (preview) button.
![Step 7](https://thepracticaldev.s3.amazonaws.com/i/ia33w8ocnqwb4650t3kt.png)

You'll receive a message informing you that the file has been generated and a quick reminder that CORS should be enabled for this app to work:
[Step 8](https://thepracticaldev.s3.amazonaws.com/i/1qxctqs399g3cuz4hicu.png)

As you can see, the app is actually an HTML file. Download it and open it on your browser:
![Step 9](https://thepracticaldev.s3.amazonaws.com/i/j4vri81ukotxdy7qy2p7.png)

Search a song and you'll get some results. Nice, it's working!
![Step 10](https://thepracticaldev.s3.amazonaws.com/i/ey21gl7xnamubrs18o9h.png)

And you can filter songs by Game, as previously configured in the Sidebar section:
![Step 11](https://thepracticaldev.s3.amazonaws.com/i/ul20hyrfxzbl5wp3ku7a.png)

As you can see, it is really easy to create a quick prototype website that leverages Azure Cognitive Search and all its capabilities. 

I hope that this blog post was interesting and useful for you. I invite you to visit [my blog](https://www.luisbeltran.mx/) for more technical content about Xamarin, Azure, and the .NET ecosystem. 90% of the content is written in Spanish language, although if you don't speak/understand it (yet), no worries, I tend to write the code in English so there's still chance a visit might pay off =)

Thanks for your time, and enjoy the rest of the Azure Advent Calendar!

See you next time,
Luis