Regex Queries in Azure AI Search

Question

Hi everyone,

I'm working on integrating Azure AI Search into a web application using the AzSearch.Automagic JavaScript library, but I’ve encountered a challenge.

---

The Problem:

I can successfully run the following query in the Azure Portal's Search Explorer, which matches documents using a regex query:

json
{
	"queryType":
   
 

However, when trying to replicate this in my web application using the AzSearch.Automagic library, the query fails to return any results.

1. Regex Queries: These work perfectly in the Azure Portal but fail in my app when using Automagic.
2. Paging and Filters: If I bypass Automagic and send the query manually using fetch, the regex queries work, but I lose critical Automagic features like:

• Pagination
  • Facets and filters
  • Built-in query handling

---

What I’ve Tried:

• Using fetch to send the regex query directly to the Azure Search REST API. The query works, but this approach breaks all Automagic features.
• Debugging Automagic to find ways to inject regex queries, but I couldn’t find a way to extend its functionality to support this.

---

My Question:

How can I run regex-based queries (like the one above) in a web app while preserving Automagic's features like pagination, filters, and other built-in functionality? Ideally, I want to add a toggle button to switch between queryType: full (with regex) and queryType: semantic.

Is there an approach to achieve both regex support and the full suite of functionality Automagic provides? Any advice or guidance would be greatly appreciated!

Answer 1

Hello Gustav Sl,

Welcome to the Microsoft Q&A and thank you for posting your questions here.

I understand that your Regex Queries works in Azure Portal but not with AzSearch.Automagic and

pagination, facets, filters, and built-in query handling are lost when bypassing Automagic.

To achieve regex support while preserving Automagic's features, you can extend the Automagic library to handle regex queries. These are a few steps you will need to do it:

1. You need to modify the Automagic library to include regex query support. This involves extending the existing query handling mechanism and, clone the AzSearch.Automagic library from its repository to your local development environment.
   1. Locate the part of the library where queries are constructed and modify it to include regex support. You can add a condition to check for a regex query type and handle it accordingly.

               // Example modification in the query construction
               function buildQuery(queryType, searchText) {
                   let query = {};
                   if (queryType === 'regex') {
                       query = {
                           queryType: 'full',
                           search: searchText,
                           searchMode: 'all',
                           queryType: 'regex'
                       };
                   } else {
                       query = {
                           queryType: 'semantic',
                           search: searchText,
                           searchMode: 'all'
                       };
                   }
                   return query;
               }
      

2. Implement a toggle button in your web application to switch between queryType: full (with regex) and queryType: semantic.
   1. HTML for Toggle Button: <button id="toggleQueryType">Toggle Query Type</button>\
   2. JavaScript for Toggle Functionality:

               let currentQueryType = 'semantic';
               document.getElementById('toggleQueryType').addEventListener('click', function() {
                   currentQueryType = currentQueryType === 'semantic' ? 'regex' : 'semantic';
                   console.log('Query type switched to:', currentQueryType);
               });
               function executeSearch(searchText) {
                   const query = buildQuery(currentQueryType, searchText);
                   automagic.search(query);
               }
            
            
      

3. Make sure that the modified Automagic library is used in your web application and that the search execution function utilizes the extended query handling.
   1. To initialize Automagic:

               var automagic = new AzSearch.Automagic({
                   index: 'your-index-name',
                   queryKey: 'your-query-key',
                   service: 'your-service-name'
               });
               automagic.addSearchBox('searchBox', {
                   highlightPreTag: '<b>',
                   highlightPostTag: '</b>',
                   suggesterName: 'sg',
                   select: 'number,street,city,region,countryCode'
               });
               automagic.addResults('results');
               automagic.addPager('pager');
               automagic.addRangeFacet('sqftFacet', 'sqft', 'number', 0, 17000);
               automagic.addCheckboxFacet('bedsFacet', 'beds', 'number');
               automagic.addCheckboxFacet('bathsFacet', 'baths', 'number');
               automagic.addCheckboxFacet('typeFacet', 'type', 'string');
               automagic.addCheckboxFacet('tagsFacet', 'tags', 'collection');
      

   2. To execute Search with Extended Query Handling:

               document.getElementById('searchButton').addEventListener('click', function() {
                   const searchText = automagic.searchBox.getValue();
                   executeSearch(searchText);
               });
            
      

I hope this is helpful! Do not hesitate to let me know if you have any other questions.

---

Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful.