Django - JQuery autocomplete custom select from multiple fields

Question

I have a user search that autocompletes by both ticker and name. The search results come back as "{{ticker}} - {{name}}". When a result is selected, I want it to fill with only the ticker, where as it currently fills with "{{ticker}} - {{name}}".

Here is my python code:

if 'term' in request.GET:
    tickers = Company.objects.filter(ticker__istartswith = request.GET.get('term')) | Company.objects.filter(name__istartswith = request.GET.get('term'))
    companies = []
    for ticker in tickers:
        companyTicker = ticker.ticker +  " - " + ticker.name
        companies.append(companyTicker)
    return JsonResponse(companies, safe=False)

and here is my javascript:

    <script>
    $( function() {
      $( "#ticker3" ).autocomplete({
        source: '{% url "financials:get_financials" %}',
        select: function (event, ui) {
            ticker.ticker
        }
      });
    } );
    </script>

Any help greatly appreciated!

You could return companyTicker as a dict in your json response. That way you could easily reference ticker and name independent of one another. companyTicker = {'ticker': ticker.ticker, 'name': ticker.name} — Rob Vezina
– Rob Vezina, Commented Jul 17, 2021 at 13:48
Are you able to give a full example as an answer? I tried that but still can't figure out how to use that as the selector. — LBJ33
– LBJ33, Commented Jul 17, 2021 at 14:26
I'm sorry. My above comment doesn't work with the jquery autocomplete function. I'll answer below. — Rob Vezina
– Rob Vezina, Commented Jul 17, 2021 at 14:48

Rob Vezina · Accepted Answer · 2021-07-17 16:06:29Z

1

A quick look at the jquery autocomplete docs reveals that you can use an array of objects for your source option. Each object should have a label and value attribute. The following should get you what you need.

if 'term' in request.GET:
    tickers = Company.objects.filter(ticker__istartswith = request.GET.get('term')) | Company.objects.filter(name__istartswith = request.GET.get('term'))
    companies = []
    for ticker in tickers:
        label = f"{ticker.ticker} - {ticker.name}"
        companyTicker = {'label': label, 'value': ticker.ticker}
        companies.append(companyTicker)
    return JsonResponse(companies, safe=False)

You can then remove the select option in your javascript:

  <script>
      $(function () {
          $("#ticker3").autocomplete({
              source: '{% url "financials:get_financials" %}',
          });
      });
  </script>

edited Jul 17, 2021 at 16:06

answered Jul 17, 2021 at 15:03

Rob Vezina

6383 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django - JQuery autocomplete custom select from multiple fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related