[Answered ]-Hide HTMX search results after option is selected

by

1👍

✅

For your first issue, the problem is that when you select an option, you’re not telling the results to go away. This is purely on the client side, so yes, this can be handled through Javascript.

function selectOption(partNumber) {
  const input = document.querySelector('#id_override');
  input.value = partNumber;
  const results = document.querySelector('#results');
  results.innerHTML = '';
}

For your second issue, the problem might be that when the search bar is emptied, a request is still sent to your Django backend with an empty query string, and the backend is returning some default results in this case.

One approach could be to modify your Django view to return no results if the query string is empty. Another approach would be to avoid sending the request in the first place if the search bar is empty. You can do this by adding a guard clause to your hx-trigger attribute like so

'hx-trigger': "keyup changed delay:500ms guard:$('id_override').value.trim() !== '', search"
👤Draka

Leave a comment