Twitter 预输入隐藏字段

Question

我正在使用 twitter typeahead 在搜索页面上向用户推荐图书列表。一切都按预期工作，但我现在想向隐藏字段添加另一个值。

我正在看的大部分教程似乎都过时了。

我的html表格如下；

<form id="search" action="<?php echo URL; ?>books/itemView?id=" method="post">
<input type="text" name="search" class="typeahead" id="demo"/>
<input type="text" name="isbn" type="hidden" class="typeahead" id="isbn"/>
<input type="submit" value="Submit" style="">
</form>

我可以从我的 json 文件中检索建议列表。我也可以单击其中之一并 select 它。这会将 id 放在我的输入字段中。我也想把isbn放在隐藏字段里，这怎么可能。

我的JS在下面；

$(document).ready(function() {
var url = 'http://localhost/logintest/'; 

var books = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 3,
  prefetch: {
    url: url+'books.json',
    ttl: 0, 
    filter: function(list) {
      return $.map(list, function(book) {                         
        return { 
        id: book.id,
        title: book.title,
        author: book.author,
        isbn: book.isbn
        }; 
        });
    }
  }
});

books.initialize();

$('.demo .typeahead').typeahead(null, {
  displayKey: 'id', // displays the id in search bar once selection made
  engine: Handlebars,
  templates: {
    header: '<h1>Name</h1>',
    empty: [
      '<div class="empty-message">',
      'no results found',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile(
       <strong>{{title}}</strong>
  },
  engine: Handlebars,
  source: books.ttAdapter() 
});
});

Answer 1

确定这就是答案，将其添加到 typeahead 函数下方

$('input.query').on('typeahead:selected', function (e, datum) {   
console.log(datum['empID']); 
});

将 empID 更改为您要记录的任何内容。

Twitter 预输入隐藏字段

Twitter typeahead hidden field

html

javascript

php

jquery

typeahead.js