Twitter的鍵入示例/動態查詢

我在尋找一個twitter's typeahead的示例。Twitter的鍵入示例/動態查詢

我想用功能獲取數據，我應該使用遠程？從服務器數據返回的將是一個Json（不只是一個數組）。從那些我只想顯示字段的人name。

在選擇正確的name後，我想運行另一個功能，例如，提醒該對象的id和description（字段）。可能與typeahead:autocompleted事件綁定？

更新/樣品：

的Dajaxice.async.get_closest_events()波紋管3個發送參數給內部服務器（緯度，經度，查詢）。查詢是用戶編寫的值。它返回一個將在下拉菜單中顯示的數組（venuesNames）。

$("#locationQueryInput").typeahead({ 
    remote:{ 
     replace: function (query) { 
      //alert($("locationQueryInput").val()); 
      Dajaxice.async.get_closest_events( 
       (function(data){            
        venuesNames = [] 
        venuesDetails = [] 
        for (var i = 0; i < data.fVenues.length; i++) { 
         venuesNames.push(data.fVenues[i].name) 
         venuesDetails[ data.fVenues[i].name ] = { 
               'id' : data.fVenues[i].id, 
               'lat' : data.fVenues[i].lat, 
               'lng' : data.fVenues[i].lng, 
               'address' :data.fVenues[i].address, 
               'city' :data.fVenues[i].city, 
         } 
        } 
        return venuesNames 
       }), 
       {'lat' : new_marker_latlng.lat, 'lng' : new_marker_latlng.lng, 'query' : query } 
      ); 
     } 


    } 

}).bind('typeahead:selected', function(obj,datum){ 
// do stuff upon completion 
... 
}

來源

2013-10-02 Diolor

下面是使用json響應的一個很好的示例：How to render JSON response using latest typeahead.js library。

$('.selector').typeahead({ 
    // base this part on example link given above... 
}).bind('typeahead:autocompleted', function (obj, datum) { 
    console.log(datum); // datum will contain the value that was autocompleted 
});

更新1：

然後到綁定事件，你會上述建議的東西，如結合 關於查詢參數，你的函數調用不正確地寫入。根據文檔：

replace - 具有可用於覆蓋請求URL的簽名替換（url，uriEncodedQuery）的函數。預計會返回一個有效的網址。如果設置，則不會對url執行通配符替換。

所以你需要通過URL作爲第一個參數，並且查詢字符串作爲第二：

remote:{ 
    replace: function (url, query) { 
    } 
}

來源

2013-10-02 03:16:01 manishie

問題，我怎樣才能得到查詢輸入值？ '$（'input'）。val（）'由於html佈局而不起作用。 – Diolor

我已經更新了我的答案，以顯示如何獲取'typeahead：autocomplete'事件處理函數中的值。請注意，您可能還需要捕獲'typeahead：selected'事件，以便某人在下拉列表中明確單擊某個項目時。 – manishie

感謝您的努力，我的意思是如何在服務器請求中獲取查詢。我用我迄今爲止的示例代碼更新了我的問題。 – Diolor

Twitter的鍵入示例/動態查詢

回答

相關問題