Creé un formulario de entrada de consulta con autocompletar en Jquery.

Quiero obtener datos de una API después de que el usuario haya seleccionado un valor de la entrada.

Aquí está el JS en mi vista HTML. El autocompletado del formulario de entrada en la búsqueda funciona bien, pero en la selección, la página devuelve un error de solicitud 400 BAD. Sospecho que tengo un problema con la forma en que llamo a la función queryData al seleccionar, pero no sé qué estoy haciendo mal.

 <script> $(function() { $("#searchBox").autocomplete({ source : function(request, response) { $.ajax({ type: "POST", url : "/search", dataType : "json", cache: false, data : { q : request.term }, success : function(data) { var aData=$.map(data, function(item){ return{ label: item.Name + " (" + item.Symbol + ")", value: item.Symbol } }); response(aData); }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus + " " + errorThrown); } }); }, minLength : 2, select: queryData }); }); const queryData = async (event, ui) => { console.log(ui.item.value); let response = await fetch('http://localhost:5000/getdata?q=' + ui.item.value); console.log("response", response) let stockdata = await response.text(); document.querySelector('ul').innerHTML = stockdata; } </script>

Aquí también está la ruta getData:

 @app.route("/getdata", methods=['GET', 'POST']) def getdata(): term = request.form['q'] finnhub_client = finnhub.Client(api_key="xx") response = finnhub_client.company_earnings("AAPL", limit=5) return response