如何在jQuery的ajax函數中從類中訪問元素ID？

我正在嘗試爲Bootstrap使用typeahead腳本。它工作得很好，但我希望它更有活力。我想在同一頁面上運行多個自動完成的輸入，而無需複製代碼。如何在jQuery的ajax函數中從類中訪問元素ID？

HTML：

<input type="text" class="typeahead" name="person_name" id="person-search"> 
<input type="text" class="typeahead" name="city_name" id="city-search">

基本的jQuery：

$('.typeahead').typeahead({ 
    source: function(typeahead, query) { 
     return $.ajax({ 
      url: '/ajax_lookup_script.php' 
       + '?source=' + ###[HOW CAN I PUT ELEMENT ID HERE?]### 
       + '&q=' + query, 
      success: function(data) { 
       return typeahead.process(data); 
      } 
     }); 
    }, 
    property: 'name' 
});

以上不工作（明顯）。但是，如果我將類名設置爲.typeahead-person-search，然後創建一個手動添加源person-search和另一個函數完全用於.typeahead-city-search的新預先功能，則一切正常。我想避免使用兩個函數，但它實際上只是一個將這兩個函數分開的變量。

如何將活動的.typeahead類的元素ID放入$.ajax函數中？

來源

2012-08-08 Ryan

事先鍵入的內容不支持在'source'參數的函數，它必須是一個數組。源代碼中沒有任何東西會對你的函數做任何事情。 https://github.com/twitter/bootstrap/blob/master/js/bootstrap-typeahead.js這是你的意思是「顯然它不工作」？ – Esailija 2012-08-08 15:54:10

我可以以某種方式將$（this）中的變量傳遞給typeahead函數，特別是source參數嗎？ – Ryan 2012-08-08 16:11:40

好吧，我去了別的東西，我無法與.typeahead librairy直接測試，但我已經做了相同的我喜歡另一個圖書館的東西。

如何回合做

$('.typeahead').each(function(){ 
    var self = $(this); 

    self.typeahead({ 
     source: function(typeahead, query) { 
      return $.ajax({ 
       url: '/ajax_lookup_script.php' 
        + '?source=' + self.attr('id') 
        + '&q=' + query, 
       success: function(data) { 
        return typeahead.process(data); 
       } 
      }); 
     }, 
     property: 'name' 
    }); 
});

來源

2012-08-08 17:15:45

完美！這正是我尋找的解決方法。謝謝。 – Ryan 2012-08-08 17:22:54

編輯::試試我的第二個答案它應該工作，我一直在使用與另一個librairy是有同樣的問題

嘗試像

var id = $(this).attr('id');

然後

var url = 'blahblah' + id + 'blablahblah);

並將var url放入你的ajax查詢中的url：spot

來源

2012-08-08 15:48:57

是的，顯然。但由於某些原因，這不適用於.typeahead函數。所有綁定到$（this）的變量都會在函數的作用域內返回undefined，即使使用console.log（$（this）.att（'id'））; – Ryan 2012-08-08 16:09:43

生病檢查一下，有沒有很多文件，它可能會有問題！ – 2012-08-08 17:05:26

你湊ld將數據屬性添加到包含URL的動態部分的每個輸入。

<input type="text" class="typeahead" name="person_name" id="person-search" data-source="person-search"> 
<input type="text" class="typeahead" name="city_name" id="city-search" data-source="city-search">

然後，您可以使用jQuery抓取並將其傳遞到URL中。

$('.typeahead').typeahead({ 
    source: function(typeahead, query) { 
     var source = $(this).data('source'); 
     return $.ajax({ 
      url: '/ajax_lookup_directory/'+source+'.php?q=' + query, 
      success: function(data) { 
       return typeahead.process(data); 
      } 
     }); 
    }, 
    property: 'name' 
});

來源

2012-08-08 15:49:34

謝謝。我從這一開始。不幸的是$（this）.data（'source'）在typeahead函數中不可訪問。我甚至用'console.log（$（this）.data（'source'））;''來仔細檢查'var source'行。未定義。有什麼建議？ – Ryan 2012-08-08 16:07:00

你可以嘗試以下

$('.typeahead').typeahead({ 
    source: function(typeahead, query) { 
     return $.ajax({ 
      url: '/ajax_lookup_directory/' + $(this).attr('id') + '.php?q=' + query, 
      success: function(data) { 
       return typeahead.process(data); 
      } 
     }); 
    }, 
    property: 'name' 
});

來源

2012-08-08 15:49:56 mreyeros

謝謝。我只是試過這個，但它看起來像$（this）沒有傳遞到.typeahead函數中。它回來未定義。接下來是什麼？ – Ryan 2012-08-08 16:08:02

如何在jQuery的ajax函數中從類中訪問元素ID？

回答

相關問題