Twitter的引導預輸入：獲取上下文/調用帶有'元素this`

Question

我使用Twitter的引導2.1.1和jQuery 1.8.1的Typeahead組件

我試圖從預輸入的內訪問該文本框元素updater功能。這是我目前的代碼，它很好用：

$('#client-search').typeahead({ 
    source: function (query, process) { 
     $.get(url, { query: query }, function (data) { 
      labels = []; 
      mapped = {}; 
      $.each(data, function(i,item) { 
       mapped[item.label] = item.value; 
       labels.push(item.label); 
      }); 
      process(labels); 
     }); 
    } 
    ,updater: function (item) { 
     $('#client-id').val(mapped[item]); 
     return item; 
    } 
    ,items: 10 
    ,minLength: 2 
}); 

我在同一頁面上有許多typeahead搜索框。每個搜索框都有一個編號爲#xxx-search的編號和一個對應的編號爲#xxx-id的隱藏輸入。我想通過做這樣的事情再利用的一切相同的代碼：

$('#client-search, #endClient-search, #other-search').typeahead({ 

    ... 

    ,updater: function (item) { 
     var target = $(this).attr('id').split('-')[0] + '-id'; 
     $('#'+target).val(mapped[item]); 
     return item; 
    } 

    ... 

我認爲this將引用文本框元素中使用，但顯然不是，因爲我得到一個未定義的錯誤螢火蟲：

$(this).attr("id") is undefined 

當我使用this代替$(this)，我得到：

this.attr is not a function 

誰能幫助使這個禾RK？

---

UPDATE：THE ANSWER，AND MORE！

感謝以下benedict_w的回答，不僅現在這個工作很完美，而且我在重用性方面也做得更好。

這裏是我的<input>看看這樣的：

<input type="text" autocomplete="off" 
    id="client-search" 
    data-typeahead-url="/path/to/json" 
    data-typeahead-target="client-id"> 
<input type="hidden" id="client-id" name="client-id"> 

注意在搜索框中如何引用隱藏標識。這裏是新的JS：

$(':input[data-typeahead-url]').each(function(){ 
    var $this = $(this); 
    $this.typeahead({ 
     source: function (query, process) { 
      $.get($this.attr('data-typeahead-url'), { query: query }, function (data) { 
       labels = []; 
       mapped = {}; 
       $.each(data, function(i,item) { 
        mapped[item.label] = item.value; 
        labels.push(item.label); 
       }); 
       process(labels); 
      }); 
     } 
     ,updater: function (item) { 
      $('#'+$this.attr('data-typeahead-target')).val(mapped[item]); 
      return item; 
     } 
     ,items: 10 
     ,minLength: 2 
    }); 
}); 

Answer 1

你是另外一個函數裏面，所以你需要保存在外部封閉元素的引用，這可以被傳遞到內罩的事件處理程序。您可以使用$.each()調用來循環執行選擇器，每次保存對元素（this）的引用 - 例如，

$('#client-search, #endClient-search, #other-search').each(function() { 
    var $this = $(this); 
    $this.typeahead({ 
     ... 

     ,updater: function (item) { 
      var target = $this.attr('id').split('-')[0] + '-id'; 
      $('#'+target).val(mapped[item]); 
      return item; 
     } 
     ... 
    }); 

Answer 2

接受的答案是一個很好的答案，但只是想分享一個實際上並不需要外部閉包的選擇。我正在使用bootstrap v2.3.1，並且可以從this.$element獲得輸入。

如：

$(':input[data-typeahead-url]').typeahead({ 
    source: function (query, process) { 
     $.get(this.$element.attr('data-typeahead-url'), { query: query }, function (data) { 
      labels = []; 
      mapped = {}; 
      $.each(data, function(i,item) { 
       mapped[item.label] = item.value; 
       labels.push(item.label); 
      }); 
      process(labels); 
     }); 
    } 
    ,updater: function (item) { 
     $('#'+this.$element.attr('data-typeahead-target')).val(mapped[item]); 
     return item; 
    } 
    ,items: 10 
    ,minLength: 2 
});