Optimize jQuery functions

Question

I have this code below for autocomplete feature of several inputTextbox. The input box also share same class ".wikiInput". When user typed something in either of them, a relevant autocomplete dropdown box should show up. Instead of hard code one by one. How do I group them in one using array or array group? Note the lookup has different arrays in different pages. Not every page showing all of the needed arrays.

    (function () {
        var cdTeamInput = $("#ctl00_ContentPlaceHolder1_txtAssociation");
        if (cdTeamInput.length > 0) {
            cdTeamInput.autocomplete({
                deferRequestBy: 0,
                autoSelectFirst: true,
                lookup: txtAssociation,
                onSelect: function (value, data) {
                    cdTeamInput.val(value.value);
                    $(".wikiSubmit").click();
                }
            });
        }
    })();

    (function () {
        var cdSubjectInput = $("#ctl00_ContentPlaceHolder1_txtSubject");
        if (cdSubjectInput.length > 0) {
            cdSubjectInput.autocomplete({
                deferRequestBy: 0,
                autoSelectFirst: true,
                lookup: txtSubject,
                onSelect: function (value, data) {
                    cdSubjectInput.val(value.value);
                    $(".wikiSubmit").click();
                }
            });
        }
    })();

---

so far what I got but still not working for cross-page array objects. Console keep saying I got undefined variables because not every page have all those arrays available. How to ignore the function if it doesn't exist in page? lookup.length>0 don't work for me.

function initAutocomplete(selector, lookup) {
  $(selector).autocomplete({
    deferRequestBy: 0,
    autoSelectFirst: true,
    lookup: lookup,
    onSelect: function (value, data) {
      cdSubjectInput.val(value.value);
      $(".wikiSubmit").click();
    }
  });
}

initAutocomplete("#ctl00_ContentPlaceHolder1_txtAssociation", txtAssociation);
initAutocomplete("#ctl00_ContentPlaceHolder1_txtSubject", txtSubject);

Answer 1

Why you not simply add this:

if(!lookup) return;

or

if(typeof lookup === 'undefined') return;

Like here

function initAutocomplete(selector) {

  if(!lookup) return;

  $(selector).autocomplete({
    deferRequestBy: 0,
    autoSelectFirst: true,
    lookup: lookup,
    onSelect: function (value, data) {
      cdSubjectInput.val(value.value);
      $(".wikiSubmit").click();
    }
  });
}

EDIT

If you do something like this:

if(txtAssociation){
  //do something
}

this will thow an error "undefined variable" if you dont declare txtAssociation before.

So you need to declare all of this variables in every page:

var txtAssociation,txtSubject;

and do this after

txtAssociation = ["v1","v2","v3"]; //Your array complete

Now when you do this:

if(txtAssociation){
  //do something
}

Finally works because now you have an undefined but declared variable.

Anyway i recommend you do something like this:

<input id="ctl00_ContentPlaceHolder1_txtAssociation" data-autocomplete="txtAssociation">

and you can call it

function initAutocomplete(selector) {

  var lookup = window[$(selector).attr("data-autocomplete")];
  if(!lookup) return;
  $(selector).autocomplete({
    deferRequestBy: 0,
    autoSelectFirst: true,
    lookup: lookup,
    onSelect: function (value, data) {
      cdSubjectInput.val(value.value);
      $(".wikiSubmit").click();
    }
  });
}

This works if txtAssociation is declared as a global variable.

This is not the best implementation of autocomplete, but works without bigger modifications.

jQuery ready

$(function(){
    initAutocomplete("#ctl00_ContentPlaceHolder1_txtAssociation", txtAssociation);
});

this is equivalent to

$(document).ready(function(){
    initAutocomplete("#ctl00_ContentPlaceHolder1_txtAssociation", txtAssociation);
});

You can use any to execute a function when the document is loaded completely.