TypeAhead不显示查询结果

-2

我有Bootstrap Typeahead的这个问题。

HTML标记：

<div class="form-group"> 
    <label for="">Recipients</label> 
    <input id="recipients" name="recipients" 
     autocomplete="off" 
     class="form-control" 
     data-role="tagsinput"> 
</div>

的JavaScript：

$('#recipientsContainer').tagsinput({ 
      allowDuplicates: false, 
      trimValue: true, 
      confirmKeys: [13, 44], 
      typeahead: { 
       hint: true, 
       highlight: true, 
       minLength: 4, 
       limit: 10, 
       source: function (query) { 
        $.ajax({ 
         url: "/app/route", 
         type: 'POST', 
         dataType: 'JSON', 
         data: {'query' : query}, 
         success: function(data) { 
          console.log(data); 
          return(data); 
         } 
        }); 
       }, 
       afterSelect: function() { 
        this.$element[0].value = ''; 
       } 
      } 
     });

Ajax调用后，我在consolle得到这个数组：

["Justin Demetria +393281893574", "Dylan Alea +393700488191", "Zahir Tatyana +393007841301", "Ryan Veda +393542236060", "Hunter Wanda +393393156943"]

问题是：我什么都看不到（没有出现。打字头不起作用。

在控制台中，我得到这个错误

bootstrap-tagsinput.js Uncaught TypeError: Cannot read property 'success' of undefined.

我怎样才能解决呢？

我使用Bootstrap 3，最后一个Typeahead js源代码。

来源

2016-08-03 Alex Baldwin

对于键入式使用Bloodhound来获取您的数据而不是ajax。

你的代码看起来应该是这样的：

var customers = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      remote: { 
       url: '/api/customers?query=%QUERY', 
       wildcard: '%QUERY' 
      } 
     }); 

     $('#customer').typeahead({ 
      minLength: 3, 
      highlight: true 
     }, { 
      name: 'customers', 
      display: 'name', 
      source: customers 
     }).on("typeahead:select", function(e, customer) { 
      vm.customerId = customer.id; 
     });

的更多信息，寻血猎犬： [email protected]

这里一些例子为预输入：TypeAhead Examples

来源

2016-08-03 13:04:08

我读了所有你的代码的成功，但我不明白我怎么可以用它在我的typehead功能在tagsinput函数内使用（如我的代码）..你能给我更多的帮助吗？非常感谢.. –

您不必使用tagsinput函数，只需使用typeahead函数就像在我的代码中看到的一样，并指定其在api中记录的行为。 – 2016-08-03 13:13:17

如果我把你的代码放在我的页面中，例如，我收到这个错误：bloodhound没有定义 –

詹姆斯，现在我的AJAX调用是：

$('#recipientsContainer').tagsinput({ 
      allowDuplicates: false, 
      trimValue: true, 
      confirmKeys: [13, 44], 
      typeahead: { 
       source: function(queryForHints) { 
        if (queryForHints.length < 4) 
         return ''; 
        var parameters = {'queryForHints': queryForHints}; 
        jQuery.ajax({ 
         url: "/app/route", 
         data: parameters, 
         type: "POST", 
         dataType: "json", 
         success: function(data) { 
          var sourceData = []; 
          for (var i = 0; i < data.length; i++) { 
           sourceData.push(data[i].text); 
          } 
          return (sourceData); 
         }, 
         error: function(data) { 
          console.log("error for xxxxx/xxxxx"); 
         }, 
         async: true 
        }); 
       } 
      } 
     });

但错误依然存在：

bootstrap-tagsinput.js:331 Uncaught TypeError: Cannot read property 'success' of undefined

错误是自举tagsinput.js排331，我发现：

if ($.isFunction(data.success)) { 
       // support for Angular callbacks 
       data.success(processItems);

我们能解决这个问题？

愚见

，问题是输入 - 标签无法了解Ajax调用

来源

2016-08-04 08:40:39

TypeAhead不显示查询结果

回答

相关问题