在同一页上的多个输入上使用typeahead.js

Question

我正在使用来自Twitter的typeahead.js。 http://twitter.github.io/typeahead.js/examples/

而我想在同一页面上使用多个输入。一个输入最初在页面上加载。然后通过点击一个按钮在用户请求时添加其他人。

我很确定我知道问题是什么，在typeahead.js的脚本已经被初始化之后，输入被添加。所以他们没有得到他们需要的信息。

我尝试手动添加第二个输入，它工作得很好，这就是为什么我得出上述结论。

我也尝试在函数中包装typeahead.js javascript，并调用添加输入但禁用第一个输入并使页面看起来很时髦。尽管如此，第二个输入的确可以像预期的那样工作。

我的代码如下：

function addRow() { 
 
    addTableRow($('.table tbody')); 
 
} 
 

 
function removeRow() { 
 
    var par = $(this).parent().parent(); 
 
    var tableSize = $('.table tbody tr').length; 
 
    if (tableSize == '1') { 
 
    alert('You must have one row'); 
 
    return false; 
 
    } 
 
    par.remove(); 
 
}; 
 

 
function calculateRow() { 
 
    var par = $(this).parent().parent(); 
 
    var price = $(par).find('.price').val(); 
 
    var qty = $(par).find('.qty').val(); 
 
    var total = price * qty; 
 
    $(par).find('.total').val(total.toFixed('2')); 
 
} 
 

 
$('.table tbody').on("click", ".removeRow", removeRow); 
 
$('.table tbody').on("blur", ".qty", calculateRow); 
 

 
function addTableRow(table) { 
 
    $(table).append(
 
    "<tr>" + 
 
    "<td><input name='item_number[]' type='text' class='form-control'></td>" + 
 
    "<td><div class='the-basics'><input class='typeahead form-control' type='text' name='item_name[]''></div></td>" + 
 
    "<td><input name='item_price[]' type='text' class='form-control price'></td>" + 
 
    "<td><input name='item_qty[]' type='text' class='form-control qty'></td>" + 
 
    "<td><input name='item_total[]' type='text' class='form-control total'></td>" + 
 
    "<td class='text-center' style='vertical-align:middle;'><a href='#' class='text-success removeRow'><i class='fa fa-trash-o'></i></a></td>" + 
 
    "</tr>"); 
 
} 
 

 
var items = new Bloodhound({ 
 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
    limit: 10, 
 
    prefetch: { 
 
    url: '/admin/items/fetch_items/', 
 
    filter: function(list) { 
 
     return $.map(list, function(item) { 
 
     return { 
 
      name: item 
 
     }; 
 
     }); 
 
    } 
 
    } 
 
}); 
 

 
items.initialize(); 
 

 
$('.the-basics .typeahead').typeahead(null, { 
 
    name: 'items', 
 
    displayKey: 'name', 
 
    source: items.ttAdapter() 
 
});

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Item #</th> 
 
     <th>Item Name</th> 
 
     <th>Item Price</th> 
 
     <th>Item Qty</th> 
 
     <th>Item Total</th> 
 
     <th class="text-center">&nbsp;</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <?php echo form_input('item_name[]', '', 'class="form-control"'); ?> 
 
     </td> 
 
     <td> 
 
     <div class="the-basics"> 
 
      <input class="typeahead form-control" type="text" name="item_name[]"> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <?php echo form_input('item_price[]', '', 'class="form-control price"'); ?> 
 
     </td> 
 
     <td> 
 
     <?php echo form_input('item_qty[]', '', 'class="form-control qty"'); ?> 
 
     </td> 
 
     <td> 
 
     <?php echo form_input('item_total[]', '', 'class="form-control total"'); ?> 
 
     </td> 
 
     <td class="text-center" style="vertical-align:middle;"> 
 
     <a href="#" class="text-success removeRow"> 
 
      <i class="fa fa-trash-o"></i> 
 
     </a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

尝试使用远程代替。

var items = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 10, 
    remote: { 
     url: '/admin/items/fetch_items/', 
     filter: function(list) { 
      return $.map(list, function(item) { 
       return { 
        name: item 
       }; 
      }); 
     } 
    } 
});