Question

我在Twitter上使用typeahead.js。 http://twitter.github.io/typeahead.js/examples/

我正在尝试在同一页面上使用多个输入。最初在页面上加载一个输入。然后通过单击按钮添加其他用户请求。

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

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

我还尝试在函数中包装typeahead.js javascript并在添加输入时调用它但禁用了第一个输入并使我的页面看起来很时髦。虽然，第二个输入确实像它应该的那样工作。

我的代码如下：

＆＃13;

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()
});

＆＃13;

<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>

＆＃13;

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
                };
            });
        }
    }
});

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

1 个答案: