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不工作：当我输入

回答

相关问题