title: Uncaught TypeError: Cannot read property 'Constructor' of undefined
body: <p>I am getting this and a couple other weird error messages on my main ASP MVC 3 layout page. </p>
  
  <p>I am using the following scripts</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/typeahead.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And trying to get the <a href="http://twitter.github.io/typeahead.js/" rel="nofollow">typeahead.js</a> to work in our nav bar. Below is the code I currently have on my machine. I had this working at one point in time, however after a sync up with a coworker the typeahead search does not work anymore and I haven't been able to track down the issue. </p>
  
  <p>The first line in the code below gives the following error</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'Constructor' of undefined
  </code></pre>
  
  <p>If I comment out the <code>protoype.blur</code> function, however, I then get this error</p>
  
  <pre><code>Uncaught TypeError: Object [object Object] has no method 'typeahead' 
  </code></pre>
  
  <p>Which points to the <code>$('.AgentSearch .typeahead).typeahead</code> function. Been stuck on this for hours, any help would be greatly appreciated. Thanks</p>
  
  <pre><code>        // Workaround for bug in mouse item selection
          $.fn.typeahead.Constructor.prototype.blur = function () {
              var that = this;
              setTimeout(function () { that.hide() }, 250);
          };
  
          $('.AgentSearch').typeahead({
              source: function (term, process) {
                  var url = '@Url.Action("GetAgents", "Agent")';
                  var agents = [];
                  map = {};
                  return ($.getJSON(url, { term: term }, function (data) {
                      $.each(data, function (i, item) {
                          map[item.Name] = item;
                          agents.push(item.Name);
                      });
                      process(agents);
                  }));
              },
              highlighter: function (item) {
                  var p = map[item];
                  var display = ''
                               + "&lt;div class='typeahead_wrapper'&gt;"
                               + "&lt;div class='typeahead_labels'&gt;"
                               + "&lt;div class='typeahead_primary'&gt;" + p.Name + "&lt;/div&gt;"
                               + "&lt;div class='typeahead_third'&gt;&lt;i&gt;LastFour:&lt;/i&gt; " + p.LastFour + "&lt;/div&gt;"
                               + "&lt;/div&gt;"
                               + "&lt;/div&gt;";
                  return display;
              },
              updater: function (item) {
                  window.location.href = ("/Monet/Agent/Details/" + map[item].SymetraNumber);
              }
          });
  </code></pre>
  
  <p>Here is the search box I'm binding this to</p>
  
  <pre><code>            &lt;form class="navbar-search pull-left"&gt;   
                  &lt;input type="text" name="names" value="" id="AgentSearch" class="search-query" data-provide="typeahead" placeholder=" Agent Search"/&gt; 
              &lt;/form&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here are the script tags as they're rendered by the browser</p>
  
  <pre><code>&lt;script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery-1.8.3.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/typeahead.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>