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);

BenMorel · Accepted Answer · 2014-07-24 13:15:57Z

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.

edited Jul 24, 2014 at 13:15

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Apr 10, 2014 at 19:40

Fiambre

1,97913 silver badges23 bronze badges

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

7 Comments

user2734550 Over a year ago

lookup=[a,b,c] a=[serious of arrays] b=[serious of arrays] so does c. And a,b,c are in different pages. in your way, I think this code would never work?

Fiambre Over a year ago

why not define an empty array when this is not available?

Fiambre Over a year ago

For that we need to know how are you defining txtAssociation or txtSubject, i think you are confused of which is the undefined variable.

user2734550 Over a year ago

Each of the variables are generated from back end and placed in the head as inline javascript with var txtAssociation = [hunderds of values], other variables generated in same way. So in my js file, I just use the variable in lookup code. Not sure if this explained how it is defined?

Fiambre Over a year ago

Ok, so the problem is when you do this initAutocomplete("#ctl00_ContentPlaceHolder1_txtAssociation", txtAssociation); i will edit my answer for an explanation.

|

Collectives™ on Stack Overflow

Optimize jQuery functions

1 Answer 1

EDIT

jQuery ready

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

jQuery ready

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related