0
我正在使用來自Twitter的typeahead.js。 http://twitter.github.io/typeahead.js/examples/
在同一頁上的多個輸入上使用typeahead.js
而我想在同一頁面上使用多個輸入。一個輸入最初在頁面上加載。然後通過點擊一個按鈕在用戶請求時添加其他人。
我很確定我知道問題是什麼,在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"> </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>