title: Mutable variable is accessible from closure. How can I fix this?
body: <p>I am using Typeahead by twitter. I am running into this warning from Intellij. This is causing the "window.location.href" for each link to be the last item in my list of items.</p>
  
  <p>How can I fix my code?</p>
  
  <p>Below is my code:</p>
  
  <pre><code>AutoSuggest.prototype.config = function () {
      var me = this;
      var comp, options;
      var gotoUrl = "/{0}/{1}";
      var imgurl = '&lt;img src="/icon/{0}.gif"/&gt;';
      var target;
  
      for (var i = 0; i &lt; me.targets.length; i++) {
          target = me.targets[i];
          if ($("#" + target.inputId).length != 0) {
              options = {
                  source: function (query, process) { // where to get the data
                      process(me.results);
                  },
  
                  // set max results to display
                  items: 10,
  
                  matcher: function (item) { // how to make sure the result select is correct/matching
                      // we check the query against the ticker then the company name
                      comp = me.map[item];
                      var symbol = comp.s.toLowerCase();
                      return (this.query.trim().toLowerCase() == symbol.substring(0, 1) ||
                          comp.c.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1);
                  },
  
                  highlighter: function (item) { // how to show the data
                      comp = me.map[item];
                      if (typeof comp === 'undefined') {
                          return "&lt;span&gt;No Match Found.&lt;/span&gt;";
                      }
  
                      if (comp.t == 0) {
                          imgurl = comp.v;
                      } else if (comp.t == -1) {
                          imgurl = me.format(imgurl, "empty");
                      } else {
                          imgurl = me.format(imgurl, comp.t);
                      }
  
                      return "\n&lt;span id='compVenue'&gt;" + imgurl + "&lt;/span&gt;" +
                          "\n&lt;span id='compSymbol'&gt;&lt;b&gt;" + comp.s + "&lt;/b&gt;&lt;/span&gt;" +
                          "\n&lt;span id='compName'&gt;" + comp.c + "&lt;/span&gt;";
                  },
  
                  sorter: function (items) { // sort our results
                      if (items.length == 0) {
                          items.push(Object());
                      }
  
                      return items;
                  },
  // the problem starts here when i start using target inside the functions
                  updater: function (item) { // what to do when item is selected
                      comp = me.map[item];
                      if (typeof comp === 'undefined') {
                          return this.query;
                      }
  
                      window.location.href = me.format(gotoUrl, comp.s, target.destination);
  
                      return item;
                  }
              };
  
              $("#" + target.inputId).typeahead(options);
  
              // lastly, set up the functions for the buttons
              $("#" + target.buttonId).click(function () {
                  window.location.href = me.format(gotoUrl, $("#" + target.inputId).val(), target.destination);
              });
          }
      }
  };
  </code></pre>
  
  <p>With @cdhowie's help, some more code: 
  i will update the updater and also the href for the click()</p>
  
  <pre><code>updater: (function (inner_target) { // what to do when item is selected
      return function (item) {
          comp = me.map[item];
          if (typeof comp === 'undefined') {
              return this.query;
          }
  
          window.location.href = me.format(gotoUrl, comp.s, inner_target.destination);
          return item;
  }}(target))};
  </code></pre>