Typeahead不工作：當我輸入

我沒有顯示typeahead建議我跟着typeahead documentation example: The Basics。當我複製/粘貼來自'The Basics'的示例代碼時，它工作正常。我改變的是我做了一個ajax請求來代替靜態數組。Typeahead不工作：當我輸入

代碼：

var substringMatcher = function(strs) { 
    return function findMatches(q, cb) { 
     var matches, substringRegex; 
     matches = []; 
     substrRegex = new RegExp(q, 'i'); 
     $.each(strs, function(i, str) { 
      if (substrRegex.test(str)) { 
       matches.push(str); 
      } 
     }); 
     cb(matches); 
    }; 
}; 

/* only part I really changed */ 
/* I replaced the static array from the example */ 
/* with an array I am getting from ajax request. */ 
var agencies_ary = [] 
$.ajax({ 
    url: "agencies/get_unique_agency_names", 
    type: "GET", 
    success: function(data){ 
     agencies_ary = data; 
    } 
}) 


$('.typeahead').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     name: 'agencies_ary', 
     source: substringMatcher(agencies_ary) 
});

Ajax請求的工作。它正確地返回一個名稱數組。

來源

2015-10-14 Neil

我將展示兩種不同的解決方案。兩者都有效。一個比另一個短得多。

解決方案1 ：

var agency_names = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.whitespace, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: 'agencies/get_unique_agency_names' 
}); 

$('.typeahead.name_input').typeahed(null, { 
    name: 'agency_names', 
    source: agency_names 
});

解決方案2

我曾與在原來問題的代碼的問題是，JavaScript是加載Ajax請求被髮送之前。要做到的JavaScript之前Ajax請求，我索性就內.done指定的javascript：

var agencies_ary = []; 
$.ajax({ 
    url: "agencies/get_unique_agency_names", 
    type: "GET", 
    success: function(data){ 
     agencies_ary = data; 
     console.log(agencies_ary[0]); 
    } 
}).done(function(){ 

    var substringMatcher = function(strs) { 
     return function findMatches(q, cb) { 
      var matches, substringRegex; 
      matches = []; 
      substrRegex = new RegExp(q, 'i'); 
      $.each(strs, function(i, str) { 
       if (substrRegex.test(str)) { 
        matches.push(str); 
       } 
      }); 
      cb(matches); 
     }; 
    }; 


    $('.typeahead').typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, 
     { 
      name: 'agencies_ary', 
      source: substringMatcher(agencies_ary) 
     }); 


});

來源

2015-10-14 20:24:14 Neil

您的解決方案，以等待Ajax調用完成，然後設置鍵盤緩衝是一個辦法做到這一點並使其恭喜工作:)，但IMO它更簡單，更快速地具有預輸入進行呼叫的東西，如：

$('.typeahead').typeahead({ 
    remote: { url: "agencies/get_unique_agency_names" } 
})

看一看Bootstrap 3 typeahead.js - remote url attributes更多的建議。

來源

2015-10-14 20:49:06 basiam

我試圖用上面的建議答案替換下面我的答案中的所有代碼。不幸的是，它不適合我。 – Neil

Typeahead不工作：當我輸入

回答

相關問題