What is a promise in Javascript?

Question

Revolucion for Monica

Asked: 2022-03-03 07:18:54 +0800 CST 2022-03-03 07:18:54 +0800 CST 2022-03-03 07:18:54 +0800 CST

Create a search form with autocomplete suggestions with Atlas Search and Django

772

I want to build an autocomplete form in a Django webapp. I have already been able to make the search bar in which I query my MongoDB database but how can I add an autocomplete? I have tried to adapt an official tutorial that does it with Javascript:

search_similar.html:

{% extends "todo/base.html" %}

{% block content %}

  <div class="recommendations">
    <!-- <div class="login-page"> -->
    <div class="form">
      <form class="form" action="{% url 'similar_results' %}" method="get">
        <input name="q" type="text" placeholder="Perfume name...">
        <input id="perfumename" type ="submit" value="Find Similar Perfumes"/>
      </form>
    </div>
    <script>
    $(document).ready(function() {
        $("#perfumename").autocomplete({
          source: async function(request, response){
            let data=await fetch(`http://localhost:8000/similar/similar_results?q={request.term}`)
            .then(results => results.json())
            .then(results => results.map(result => {
              return { label: result.name, value: result.name, id:result._id };
            }
            response(data);
          },
          minLength:2,
          select: function(event, ui){
            console.log(ui.item);
          }
        })
      })
    </script>
  </div>

{% endblock %}

Even though I have autocomplete="nope" the first search bar still shows chrome's default autocomplete and doesn't show the one I built in MongoDB.

I wonder if it's not a problem in the javascript, but I'm bad at javascript. Indeed the url where we arrived when we did when we press the button:

urls.py

path('similar/similar_results/', views.SearchResultsView.as_view(), name='similar_results'),

views.SearchResultsView:

class SearchResultsView(ListView):
    model = Perfume
    template_name = 'todo/search_similar_results.html'

    def get_queryset(self):  # new
        query = self.request.GET.get('q')
        print("JE SUIS PASSE PAR LA")
        # object_list = list(collection.find({"q0.Results.0.Name": {"$regex": str(query), "$options": "i"}}))
        object_list = list(collection.aggregate([
                {
                    '$search': {
                        'index': 'default',
                        'compound': {
                            'must': {
                                'text': {
                                    'query': str(query),
                                    'path': 'name',
                                    'fuzzy': {
                                        'maxEdits': 2
                                    }
                                }
                            }
                        }
                    }
                }
            ]
        ))
        print([x["name"] for x in object_list])
        return [x["name"] for x in object_list]

And it returns everything I need:

['Not a Perfume - Coffret Noël Not a Perfume', 'Festival Nite Pour Lui – Coffret Noël Eau de Toilette', ... , 'Parfum de Peau - Huile Parfumée Roll-on'

In my opinion it is possible that there is the problem in the javascript: http://localhost:8000/similar/similar_results?q={request.term}.

Update

I tried Mauricio Conteras's solution but I have problems in the backend (which I think I solve) and the frontend that I haven't solved.

back-end

I had problems with the backend. Actually I get the following error: pymongo.errors.OperationFailure: Remote error from mongot :: caused by :: autocomplete index field definition not present at path XXX. With the following pipeline:

pipeline = [
        {
            "$search": {
                "index": "default", # nombre de mi index
                "autocomplete": {
                    "path": "name", #el nombre del field sobre cual hizo el index
                    "query": str(query) # query = self.request.GET.get('q')
                }
            }
        },
        {
            "$limit": 10
        },
        {
            "$project": {
                "_id": 0,
                "title": 1
            }
        }
    ]

However, I put nombreas the path of the field definition of the index:

But with the original I return what I need:

    pipeline = [
            {
                '$search': {
                    'index': 'default',
                    'compound': {
                        'must': {
                            'text': {
                                'query': str(query),
                                'path': 'name',
                                'fuzzy': {
                                    'maxEdits': 2
                                }
                            }
                        }
                    }
                }
            },
            {
                "$limit": 10
            },
            {
                "$project": {
                    "_id": 0,
                    "name": 1
                }
            }
        ]
    result = list(collection.aggregate(pipeline))
    data = {'data': result}
    print(data)
    return JsonResponse(data)

Bring back:

{'data': [{'name': 'Not a Perfume - Coffret Noël Not a Perfume'}, {'name': 'Festival Nite Pour Lui – Coffret Noël Eau de Toilette'}, {'name': 'Festival Nite Pour Ell
e – Coffret Noël Eau de Parfum'}, {'name': "For A Kiss 'Iconic Love' - Coffret Noël Eau de Toilette"}, {'name': 'Daisy Love - Eau de Toilette'}, {'name': 'Crystal No
ir - Eau de Parfum'}, {'name': 'Rose Pompon - Eau de Toilette'}, {'name': 'Candy love - Eau de Toilette'}, {'name': 'Drakkar Noir - Eau de Toilette'}, {'name': 'Quat
re en Rose - Eau de parfum'}]}

front-end

I have tried to display the data retrieved from the backend in a simple alert:

function autocomplete(value) {
      if(!value) return;
      currentFocus = -1;
      url = `/similar/similar_results/?query=${value}`;
      fetch(url)
      .then(res => res.json())
      .then(json => {
        let data= json.data;
        alert(data);}) // <-- Aqui intento muestrar los datos que provienen del backend
      .catch(e => {
        console.error(e.message);
        console.log('Uuuuups');
      });
    }

But I never get this message.

In the console I get:

(index):99 Unexpected token < in JSON at position 2
(anonymous) @ (index):99
Promise.catch (async)
autocomplete @ (index):98
(anonymous) @ (index):140
(index):100 Uuuuups

Which seems to come from the try catch in the javascript:

Mea maxima culpa

What is returned is an html page. I think I use as endpoint what is used to return the results page when you did Enter

3 Answers

Voted

Mauricio Contreras · Answer 1 · 2022-04-01T05:31:42+08:00

ISSUE

You want to make an autocomplete list in html , so that it contains the values according to a query to a MongoDB Atlas database , performed using an index autocompletein an aggregation process using the operator $search(exclusive to Mongo Atlas).

SOLUTION

A possible solution is to use a call fetchor call ajaxto our backend, in such a way that we are returned a list of elements that match what is typed in the input element ( input) of the search form.

The idea is to make a request to the Database using the value of the element as the lookup value input, and generate a suggestion list (auto-complete) that matches what has been written.

Assuming you have a decent connection speed, you can accomplish the task without much trouble.

In this example we will use pure Javascript, with no third party libraries, except for certain CSS3 global styles, which we will apply using Bootstrap .

back-end

Primero vamos a configurar el endpoint de nuestro backend, escrito en Django. No tocaremos la configuración de índices de MongoDB Atlas, ya que se asume que los mismos ya han sido configurados para búsqueda de autocompletado.

Supongamos que usaremos el siguiente endpoint que recibe un valor mediante una Query URL:

/api/entidad?clave=valor

En este endpoint estamos enviando un par <clave>=<valor> en la url de la solicitud.

Así, podemos crear la siguiente función en el archivo views.py de nuestra aplicación:

from django.http import JsonResponse
from pymongo import MongoClient


user = 'my_user'
pswd = 'my_pass'
mongo_uri = f'mongodb+srv://{user}:{pswd}@xxxx.yyyyy.gcp.mongodb.net/test?retryWrites=true&w=majority'

def search(request):
    params = request.GET
    title = params.get('title', '')
    client = MongoClient(mongo_uri)
    db = client.my_database
    pipeline = [
        {
            "$search": {
                "index": "revolucion",
                "autocomplete": {
                    "path": "title",
                    "query": title
                }
            }
        },
        {
            "$limit": 10
        },
        {
            "$project": {
                "_id": 0,
                "title": 1
            }
        }
    ]
    result = list(db.collection.aggregate(pipeline))
    data = {'data': result}
    return JsonResponse(data)

Este es un ejemplo de búsqueda de autocompletado en la base de datos my_database usando el índice llamado revolucion. Vemos que el pipeline de agregación para la etapa $search es de tipo autocomplete, sobre el campo title y usando como elemento de consulta (query) el valor obtenido de la url de la petición. En este ejemplo, se están limitando los resultados a sólo 10, pero puedes ajustar el valor a un número más alto o puedes eliminar totalmente la etapa $limit para que devuelva todos los resultados que coincidan con la consulta.

El resultado de dicha consulta a MongoAtlas se almacena en un diccionario dentro de la clave data y luego se envía este diccionario en una respuesta tipo json al cliente que realizó la solicitud.

Esto es lo básico de un endpoint en Django para realizar la consulta de autocompletado a la Base de Datos y enviar el resultado al cliente.

Frontend

Ahora, la parte más complicada está en generar una lista de autocompletado que se actualice de acuerdo a lo que el usuario escribe en el elemento de tipo input. Existen diversas formas de lograr el objetivo, pero usaremos una forma básica que implica programación en javascript y conocimiento de html y css.

Lo primero es trabajar en la lógica de petición a nuestro backend. Para ello usaremos la API fetch:

fetch(endpoint_url)
.then(res => res.json())
.then(json => {
  let data = json.data;
  // data contiene la lista de elementos que deseamos usar en nuestra sugerencia
  // de autocompletado.
  // ...
})
.catch(e => {
  console.log('Uuuuups');
});

Esta es la forma en que podemos hacer la petición a nuestro endpoint en Django. La lógica para escribir el resultado como una lista de sugerencias de autocompletado varía de acuerdo los resultados deseados.

En este ejemplo usaré algunas funciones que se encargarán de dar formato tanto a la lista como al resultado obtenido. Además, usaré una llamada a un endpoint que será: api/movies. En mi ejemplo usaré la base de datos de prueba que provee Mongo Atlas.

La primera función que vamos a implementar se llamará autocomplete, y será como se ve a continuación:

function autocomplete(value) {
  if(!value) return;
  currentFocus = -1;
  url = `/api/movies?title=${value}`;  // <- value: valor introducido en el input
  fetch(url)
  .then(res => res.json())
  .then(json => {
    closeAllLists();
    if(!json.data || !json.data.length) return;
    let listContainer = document.createElement('DIV');
    listContainer.setAttribute('id', 'autocompleteList');
    listContainer.setAttribute('class', 'autocomplete-items');
    autocompleteContainer.appendChild(listContainer);
    let movies = json.data;
    for(let movie of movies) {
      let title = document.createElement('DIV');
      title.innerText = movie.title;
      title.addEventListener('click', e => {
        autocompleteInput.value = e.currentTarget.innerText;
        closeAllLists();
      });
      listContainer.appendChild(title);
    }
  });
}

Analicemos esta función en detalle, ya que es la que realiza todo el proceso de generar la lista de autocompletado.

Se recibe un valor, y se establece una variable (que usaremos más adelante), llamada currentFocus a -1. Se crea una cadena url dinámicamente usando el valor recibido. Se hace la llamada a nuestro endpoint usando la url generada.

El resultado de dicha llamada se convierte en un objeto de Javascript usando el método json() del objeto Response recibido. Una vez que tenemos nuestro objeto, llamamos a una función llamada closeAllLists() (que veremos más adelante) y procedemos a obtener los datos recibidos.

Se crea un elemento de tipo div, y le añadimos un identificador al mismo (atributo id), también le añadimos una clase css para darle el aspecto que definiremos con los estilos.

Seleccionamos el elemento que contendrá nuestra lista de resultados y le agregamos el div que acabamos de crear, como nodo hijo usando appendChild().

Por último vamos a recorrer cada elemento de la lista de datos devuelta, y por cada valor (en este ejemplo estamos buscando auto completar el título de una película), vamos a crear un nuevo elemento div que contendrá el valor devuelto por la BD. Además, en cada iteración, añadimos un manejador para el evento click, para que al hacer clic sobre dicho elemento, el input tome ese valor. Al final, en cada iteración, añadimos el elemento div al contenedor de elementos.

Ahora, lo que haremos es darle algo de diseño y por supuesto, acciones para el uso del teclado (usar teclas de dirección arriba y abajo y presionar Enter sobre un elemento seleccionado).

Esta lógica se basa casi toda en este ejemplo de w3schools. Si bien he cambiado algunos detalles, es básicamente el mismo concepto.

La función closeAllLists() se encarga de eliminar del nodo contenedor principal los contenedores añadidos, para despejar o limpiar el camino para el siguiente grupo de auto completado de acuerdo a lo que se va escribiendo en el elemento input:

function closeAllLists() {
  let listElements = document.getElementsByClassName('autocomplete-items');
  // recorre todos los elementos hijos del contenedor de items y los elimina
  for (let i = 0; i < listElements.length; i++) {
    listElements[i].parentNode.removeChild(listElements[i]);
  }
}

La siguiente función se encarga de manejar el evento keydown cuando estamos escribiendo en el elemento input y deseamos seleccionar algún elemento de la lista que se despliega:

function keyDownHandler(event) {
  let items;
  let item = document.getElementById('autocompleteList');
  if (item) items = item.getElementsByTagName("div");
  if(event.keyCode === 40) { // Down (Dirección hacia abajo)
    currentFocus++;
    addActiveClass(items);
  } else if(event.keyCode === 38) {  // Up (Dirección hacia arriba)
    currentFocus--;
    addActiveClass(items);
  } else if(event.keyCode === 13) {  // Enter (Tecla de Intro)
    event.preventDefault();
    if(currentFocus > -1) {
      if(items) {
        items[currentFocus].click();
      }
    }
  }
}

Las siguientes 2 funciones se encargan de establecer los estilos o retirarlos según un elemento se encuentre seleccionado (currentFocus):

function addActiveClass(items) {
  if (!items) return;
  removeActiveClass(items);
  if (currentFocus >= items.length) currentFocus = 0;
  if (currentFocus < 0) currentFocus = (items.length - 1);
  items[currentFocus].classList.add("autocomplete-active");
}

function removeActiveClass(items) {
  for (var i = 0; i < items.length; i++) {
    items[i].classList.remove("autocomplete-active");
  }
}

Por último, debemos manejar los eventos input y keydown sobre nuestro elemento de texto, para que se ejecuten las acciones necesarias y se realice la búsqueda a BD del texto para el auto completado, además se añade un manejador para el evento "click" sobre cualquier sitio del documento diferente al input, para que el panel de auto completado se oculte.

autocompleteInput.addEventListener('input', e => {
  closeAllLists();
  autocomplete(e.currentTarget.value);
});

autocompleteInput.addEventListener('keydown', keyDownHandler);

document.addEventListener('click', e => {
  closeAllLists();
});

La implementación casi completa del HTML con los estilos y el script se puede apreciar en el siguiente código:

  <!-- ESTILOS DE BOOTSTRAP -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <!-- ESTILOS PROPIOS -->
  <style>
    .autocomplete-items {
      position: absolute;
      border: 1px solid #d4d4d4;
      border-bottom: none;
      border-top: none;
      z-index: 99;
      /*position the autocomplete items to be the same width as the container:*/
      top: 100%;
      left: 0;
      right: 0;
    }
    .autocomplete-items div {
      padding: 10px;
      cursor: pointer;
      background-color: #fff;
      border-bottom: 1px solid #d4d4d4;
    }
    .autocomplete-items div:hover {
      /*when hovering an item:*/
      background-color: #e9e9e9;
    }
    .autocomplete-active {
      /*when navigating through the items using the arrow keys:*/
      background-color: DodgerBlue !important;
      color: #ffffff;
    }
  </style>
  <!-- PLANTILLA HTML (FORMULARIO) -->
  <div class="container-fluid mt-3">
    <div class="row justify-content-center">
      <div class="col-6">
        <p class="lead text-center">
          {{ page_title }}
        </p>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-8">
        <form autocomplete="off">
          <div id="autocompleteContainer" class="input-group mb-3 autocomplete">
            <input id="autocompleteInput" type="text" class="form-control autocomplete" placeholder="Movie title" aria-label="Movie title search" aria-describedby="searchButton">
            <button class="btn btn-outline-secondary" type="button" id="searchButton">Search</button>
          </div>
          <input class="btn btn-success" type="submit">
        </form>
      </div>
    </div>
  </div>
  <!-- JAVASCRIPT -->
  <script>
    let currentfocus;
    let autocompleteContainer = document.getElementById('autocompleteContainer');
    let autocompleteInput = document.getElementById('autocompleteInput');

    function closeAllLists() {
      let listElements = document.getElementsByClassName('autocomplete-items');
      for (let i = 0; i < listElements.length; i++) {
        listElements[i].parentNode.removeChild(listElements[i]);
      }
    }

    function autocomplete(value) {
      if(!value) return;
      currentFocus = -1;
      url = `/api/movies?title=${value}`;
      fetch(url)
      .then(res => res.json())
      .then(json => {
        closeAllLists();
        if(!json.data || !json.data.length) return;
        let listContainer = document.createElement('DIV');
        listContainer.setAttribute('id', 'autocompleteList');
        listContainer.setAttribute('class', 'autocomplete-items');
        autocompleteContainer.appendChild(listContainer);
        let movies = json.data;
        for(let movie of movies) {
          let title = document.createElement('DIV');
          title.innerText = movie.title;
          title.addEventListener('click', e => {
            autocompleteInput.value = e.currentTarget.innerText;
            closeAllLists();
          });
          listContainer.appendChild(title);
        }
      })
      .catch(e => {
        console.error(e.message);
        console.log('Uuuuups');
      });
    }

    function keyDownHandler(event) {
      let items;
      let item = document.getElementById('autocompleteList');
      if (item) items = item.getElementsByTagName("div");
      if(event.keyCode === 40) { // Down
        currentFocus++;
        addActiveClass(items);
      } else if(event.keyCode === 38) {  // Up
        currentFocus--;
        addActiveClass(items);
      } else if(event.keyCode === 13) {  // Enter
        event.preventDefault();
        if(currentFocus > -1) {
          if(items) {
            items[currentFocus].click();
          }
        }
      }
    }

    function addActiveClass(items) {
      if (!items) return;
      removeActiveClass(items);
      if (currentFocus >= items.length) currentFocus = 0;
      if (currentFocus < 0) currentFocus = (items.length - 1);
      items[currentFocus].classList.add("autocomplete-active");
    }

    function removeActiveClass(items) {
      for (var i = 0; i < items.length; i++) {
        items[i].classList.remove("autocomplete-active");
      }
    }

    autocompleteInput.addEventListener('input', e => {
      closeAllLists();
      autocomplete(e.currentTarget.value);
    });

    autocompleteInput.addEventListener('keydown', keyDownHandler);

    document.addEventListener('click', e => {
      closeAllLists();
    });
  </script>

El resultado de esta implementación se puede observar en la siguiente aplicación Django subida a Heroku.

Nota

Cabe destacar, que para que este código funcione correctamente, se debe establecer la propiedad autocomplete del formulario a off:

autocomplete="off"

De lo contrario, el navegador llenará con los datos del historial de auto completado local, su propia lista de auto completado.

Espero que esto te ayude a resolver el problema.

Ariel Montes · Answer 2 · 2022-03-23T08:58:13+08:00

The easiest way I could find is to use the jQuery API , you just need to import the jQuery min and the jQuery UI CSS/JS.

Here is an example:

$(document).ready(function(){

    var perfumes = ["dior","pacco","moschino"];
    
    $("#autocomplete").autocomplete({source: perfumes, minLength: 0}).focus(function(){
        /* Muestra todas las opciones al enfocar el input */
        $(this).autocomplete('search', $(this).val())
    });

});

<!-- jQuery-UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css"/>


<form class="form" action="#" method="get" autocomplete="off">
    <input id="autocomplete" type="text" placeholder="Perfume name...">
    <input id="perfumename" type="submit" value="Find Similar Perfumes"/>
</form>


<!-- jQuery-Min JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- jQuery-UI JS -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

You can change the API CSS theme to one of the following:

base: http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css
black tie: http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css
blitzer: http://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css
cupertino: http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css
dark-hive: http://code.jquery.com/ui/1.9.1/themes/dark-hive/jquery-ui.css
dot-luv: http://code.jquery.com/ui/1.9.1/themes/dot-luv/jquery-ui.css
eggplant: http://code.jquery.com/ui/1.9.1/themes/eggplant/jquery-ui.css
excite-bike: http://code.jquery.com/ui/1.9.1/themes/excite-bike/jquery-ui.css
flick: http://code.jquery.com/ui/1.9.1/themes/flick/jquery-ui.css
hot-sneaks: http://code.jquery.com/ui/1.9.1/themes/hot-sneaks/jquery-ui.css
humanity: http://code.jquery.com/ui/1.9.1/themes/humanity/jquery-ui.css
le-frog: http://code.jquery.com/ui/1.9.1/themes/le-frog/jquery-ui.css
mint-choc: http://code.jquery.com/ui/1.9.1/themes/mint-choc/jquery-ui.css
overcast: http://code.jquery.com/ui/1.9.1/themes/overcast/jquery-ui.css
pepper-grinder: http://code.jquery.com/ui/1.9.1/themes/pepper-grinder/jquery-ui.css
redmond: http://code.jquery.com/ui/1.9.1/themes/redmond/jquery-ui.css
smoothness: http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css
south-street: http://code.jquery.com/ui/1.9.1/themes/south-street/jquery-ui.css
start: http://code.jquery.com/ui/1.9.1/themes/start/jquery-ui.css
sunny: http://code.jquery.com/ui/1.9.1/themes/sunny/jquery-ui.css
swanky-purse: http://code.jquery.com/ui/1.9.1/themes/swanky-purse/jquery-ui.css
trontastic: http://code.jquery.com/ui/1.9.1/themes/trontastic/jquery-ui.css
ui-darkness: http://code.jquery.com/ui/1.9.1/themes/ui-darkness/jquery-ui.css
ui-lightness: http://code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css
vader: http://code.jquery.com/ui/1.9.1/themes/vader/jquery-ui.css

_{Reference where this lisa was taken from}

You can also create a custom style based on one of the existing themes, one way could be to create your own CSS file and copy the content of one of these links, to modify it successively.

Triby · Answer 3 · 2022-04-01T08:33:04+08:00

Estás recibiendo error al interpretar a JSON porque las propiedades y valores están encerradas entre comillas simples y deberían estar entre comillas dobles. Referencia: https://www.json.org/json-es.html

You must correct this from the backend . I don't know Python, but @MauricioContreras answer seems more than adequate, check the last line: return JsonResponse(data)and you have only print(data). I guess you just have to include the corresponding library and print instead of returning.

Whether you rely on Mauricio's answer or this tutorial , the ideal is to return a string containing valid JSON from the server.

Only as a last option, you can try it in frontend

Testing first with the data posted in your question:

let str = `{'data': [{'name': 'Not a Perfume - Coffret Noël Not a Perfume'}, {'name': 'Festival Nite Pour Lui – Coffret Noël Eau de Toilette'}, {'name': 'Festival Nite Pour Elle – Coffret Noël Eau de Parfum'}, {'name': "For A Kiss 'Iconic Love' - Coffret Noël Eau de Toilette"}, {'name': 'Daisy Love - Eau de Toilette'}, {'name': 'Crystal Noir - Eau de Parfum'}, {'name': 'Rose Pompon - Eau de Toilette'}, {'name': 'Candy love - Eau de Toilette'}, {'name': 'Drakkar Noir - Eau de Toilette'}, {'name': 'Quatre en Rose - Eau de parfum'}]}`;

// Esta cadena es la única que está bien y hay que conservar
// "For A Kiss 'Iconic Love' - Coffret Noël Eau de Toilette"

// Remplazar comillas simples por dobles, al inicio y final de cadenas
str = str.replaceAll("{'", '{"');
str = str.replaceAll("':", '":');
str = str.replaceAll(": '", ': "');
str = str.replaceAll("'}", '"}');

// Ya se puede interpretar como JSON
console.log(JSON.parse(str));

Now, adapted to AJAX request, you must get the result as text in order to apply the changes and interpret as JSON:

function autocomplete(value) {
    if(!value) return;
    currentFocus = -1;
    url = `/similar/similar_results/?query=${value}`;
    fetch(url)
    .then(res => res.text()) // Devolver solo texto
    .then(str => {
        // Aplicar remplazos
        str = str.replaceAll("{'", '{"');
        str = str.replaceAll("':", '":');
        str = str.replaceAll(": '", ': "');
        str = str.replaceAll("'}", '"}');
        // Interpretar JSON
        let json = JSON.parse(str);

        let data= json.data;
        // Alert podría mostrar solo [Object Object] o similar
        // Usa la consola para verificar los datos
        console.log(data);

        // Ahora puedes recorrer con
        data.forEach(item => {
            // Acceder al nombre de cada elemento
            let name = item.name;
        });
    })
    .catch(e => {
        console.error(e.message);
        console.log('Uuuuups');
    });
}

Create a search form with autocomplete suggestions with Atlas Search and Django

Update

back-end

front-end

Mea maxima culpa

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?