无法读取未定义的属性'indexOf'（TypeScript）

Question

I have cofeescript with working code here is code of it

   window.load_autocomplete_fields = ->
  $('.airport_field').each ->
    $(this).autocomplete({
      delay: 10,
      minLength: 0,
      source: ((request, response) ->
        $(this.element[0]).attr('data-req-term', request.term)
        $.ajax {
          url: $(this.element[0]).attr('data-source'),
          dataType: "json",
          data: {
            term: request.term
          },
          success: ((data) ->
            results = []
            $.map(data.cities, (value, key) ->
              results.push(value)
              $.map(value.airports, (value2, key2) -> results.push(value2))
            )
            $.map(data.airports, (value, key) -> results.push(value))
            response(results)
          ),
          error: (-> response([]))
        }
        return null
      ),
      focus: ((event, ui) ->
        return false
      ),
      select: ((event, ui) ->
        qel = $(event.currentTarget)
        qel.val(ui.item.fullname)
        $(qel.attr('data-id-element')).val(ui.item.id)
        return false
      )
    }).data("ui-autocomplete")._renderItem = (ul, item) ->
      create_autocomplete_item($(this.element[0]), ul, item)

    $('.airport_field').on 'autocompleteselect', ->
      if this.id.indexOf('origin') != -1
        id = this.id.split('_')[2]
        $("#search_legs_#{id}_destination_text").focus()

    $('.airport_field').focus ->
      $(this).val(' ').keydown() unless $(this).val()

I need to rewrite it into typescript

So I rewrite it like this

 interface Window { 
    load_autocomplete_fields:()=>JQuery;
    load_datepickers:()=>JQuery;
    load_datepickers_inline:()=>JQuery; 
    customCheckbox:(checkboxName:string) => JQuery;
    customCheckboxes:any;
    customRadio:(radioName:string)=>JQuery;
  }

    window.load_autocomplete_fields = () =>
  $('.airport_field').each(function() {
    $(this).autocomplete({
      delay: 10,
      minLength: 0,
      source(request, response) {
        $(this.element[0]).attr('data-req-term', request.term);
        $.ajax({
          url: $(this.element[0]).attr('data-source'),
          dataType: "json",
          data: {
            term: request.term
          },
          success(data) {
            const results = [];
            $.map(data.cities, function(value, key) {
              results.push(value);
              return $.map(value.airports, (value2, key2) => results.push(value2));
            });
            $.map(data.airports, (value, key) => results.push(value));
            return response(results);},
          error() { return response([]); }
        });
        return null;},
      focus(event, ui) {
        return false;},
      select(event, ui) {
        const qel = $(event.currentTarget);
        qel.val(ui.item.fullname);
        $(qel.attr('data-id-element')).val(ui.item.id);
        return false;}
    }).data("ui-autocomplete")._renderItem = function(ul, item) {
      return create_autocomplete_item($(this.element[0]), ul, item);
    };

    $('.airport_field').on('autocompleteselect', function() {
      if ($(this).id.indexOf('origin') !== -1) {
        let id = $(this).id.split('_')[2];
        return $(`#search_legs_${id}_destination_text`).focus();
      }
    });

    $('.airport_field').focus(function () {
      if (!$(this).val()) { return $(this).val(' ').keydown(); }
    });
  })
;

But now I have error.

I this row I need to get value from select list and paste it to input

if ($(this).id.indexOf('origin') !== -1) {

I have error

Cannot read property 'indexOf' of undefined

How I can solve it?

Thanks for help

Answer 1

I this row I need to get value from select list and paste it to input

if ($(this).id.indexOf('origin') !== -1) {

I have error

Cannot read property 'indexOf' of undefined

$(this) is a jquery object, you need to get the DOM object from it first

$(this)[0].id

or simply

this.id

ie

if ($(this)[0].id.indexOf('origin') !== -1) {