Javascript onload not firing

Development
7

Thanks for the help Robert, I was kind of out of my depth on this for a bit! Anyway, here is what I got in the end as promised. I ended up using the onload function, which triggers after the DOM is loaded. I tried to use jquery for a bit until I heard that emberjs was depreciating it.

import { ajax } from 'discourse/lib/ajax';
//could update the highlight to hit on the split(" ") aswell. If, you know, i feel like it.

export default Ember.Component.extend({
  runOnceRan: false,
  myAws: "",
  subbedReps: [],
  //update the suggested options to follow for representatives in the input box
  updatePossibles: function (substr) {
    var compContext = this; //component context
    if (substr == "") {
      return;
    }
    //get suggestions
    substr = encodeURIComponent(substr);
    ajax(`meritmoot/reps/search/${substr}.json`, { type: "GET" }).then( result => {
      result = result.api;
      let pv = []; //possible values
      for(let i = 0; i < result.length; i++) {
        let newItem = {
          label: result[i].mm_reference_str,
          value: result[i].id,
          id: result[i].id,
        }
        pv.push(newItem);
      }
      console.log(pv)
      compContext.myAws.list = pv;
      //update Awesomplete internal logic
      compContext.myAws.evaluate();
      //show Awesomplete suggestions
      compContext.myAws.open();
    });
  },
  runOnce: function () {
    //let us know it ran...
    console.log("in runOnce")
    const substrInput = document.getElementById("rep-input");
    const compContext = this;
    
    //create custom Awesomplete (options list) for substrInput (rep-input).
    this.myAws = new Awesomplete(substrInput);
    console.log(substrInput)

    //all list items should be shown, as they are selected with predjudice on substr value change
    this.myAws.filter = function (text, input) {
      return true
    }

    //show whenever, turn autocomplete on.
    this.myAws.minChars = 0;
    this.myAws.autocomplete = "on";

    //on selection of option, handle it.
    document.addEventListener('awesomplete-selectcomplete', function(e) {
        if(e.srcElement == substrInput) {
          let id = e.text.value;
          substrInput.value = "";
          
          //send selection backend
          let uriid = encodeURIComponent(id)
          ajax(`meritmoot/reps/${uriid}`, {type: "PUT" }).then( result => {
            console.log("put passed back:");
            console.log(result);
          });

          //update selection frontend
          let l = compContext.get("subbedReps");
          l.pushObject(id) //pushObject is needed instead of push (https://github.com/emberjs/ember.js/issues/10405)
          compContext.set("subbedReps", l);

          //1. DONE create a table that matches user id to subscribed reps.
          //2. DONE create a way to add subscribed reps to that table. in progress (need GET PUT DELETE)
          //3. view reps next to substrInput
          //3. create a way to view votes next to topics.
          //4. after all that, refresh that mechanism of viewing votes here.
        }
      }, false);
    
    //get users saved representatives, show them.
    ajax(`meritmoot/reps`, {type: "GET"}).then( result => {
      console.log("get passed back:");
      console.log(result);
      compContext.set("subbedReps", result.mmfollows);
      console.log("subbedReps")
      console.log(compContext.get("subbedReps"));
    });

    //on input, update suggestions
    document.addEventListener('input', function(e) {
        if(e.explicitOriginalTarget == substrInput) {
          compContext.updatePossibles(substrInput.value);
        }
      }, false)
    console.log(this.myAws);
  },
  didRender() {
    this._super(...arguments);
    if( ! this.runOnceRan ) {
      this.runOnce();
      this.set("runOnceRan", true);
    }
  }
});