Как создать гиперссылку в совпадающих результатах в Django search autocomplete trevoreyre

Я использую autocomplete trevoreyre для обработки функции автозаполнения в строке поиска. На данный момент пользователь перенаправляется на страницу search_result при нажатии на enter или иконку поиска. Проблема в том, что даже если появляется предложение, пользователь должен нажать на заголовок, затем нажать enter или иконку поиска, тогда функция перенаправит его на страницу search_results, и тогда пользователь сможет нажать на интересующую его карточку.

Я хотел бы расширить эту функцию и создать гиперссылку в предложениях заголовков, чтобы если пользователь нажимает на предложение заголовка, то функция должна перенаправлять пользователя непосредственно на страницу DetailedView.

Я знаю, что должен следовать этой логике:

  onSubmit: result => {
      window.open(`${wikiUrl}/wiki/${
        encodeURI(result.title)
      }`)
  }

но я не уверен, как создать ссылку на страницы DetailView, если в моем Django приложении есть 3 модели и эти модели имеют разные URL. Я хочу добавить что-то вроде события onclick, чтобы, когда пользователь нажимает на предложение, он перенаправлялся на страницу DetailView, но если нажимает на enter или иконку поиска, он перенаправляется на страницу search_result.

base.html

  <button onclick="openSearch()"><i class="fas fa-search fa-sm"></i></button>
  <form action="{% url 'search_result' %}" method="get" id="search">
    {% csrf_token %}
    <div class="searchbar" id="autocomplete">
      <input name="q" type="text" placeholder="Search..." class="search_input">
      <button class="search_icon"><i class="fas fa-search fa-sm"></i></button>
      <ul class="autocomplete-result-list"></ul>
    </div>
  </form>

autocomplete.js

new Autocomplete('#autocomplete', {
search: input => {

  const url = `/search/?title=${input}`
  return new Promise(resolve => {
    if (input.length < 3) {
      return resolve([])
    }

    fetch(url)
      .then(response => response.json())
      .then(data => {
        resolve(data.data)
      })
  })
},
onSubmit: result => {
  console.log(result)
}
})

views.py

def search_autocomplete(request):
    query = request.GET.get('title')
    search_list = []
    if query:
        testone_list= TestOne.objects.search_one(query=query).order_by('-publish')
        testtwo_list = TestTwo.objects.search_one(query=query).order_by('-publish')
        testthree_list = TestThree.objects.search_one(query=query).order_by('-publish')
    
        search_list = map(lambda x: x.title, chain(testone_list, testtwo_list, testthree_list))
            
    return JsonResponse({'status':200, 'data': list(search_list)})

urls.py

urlpatterns = [
path('testone/<slug:slug>', views.TestOneDetailViewFBV, name='testone'),
path('testtwo/<slug:slug>', views.TestTwoDetailViewFBV, name='testtwo'),
path('testthree/<slug:slug>', views.TestThreeDetailViewFBV, name='testthree'),
path('search/', views.search_autocomplete),
path('search_results/', views.SearchViewFBV, name='search_result'),
]

Вернуться на верх