Twitter类型隐藏字段

时间:2015-01-22 16:00:21

标签: javascript php jquery html typeahead.js

我正在使用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文件中检索建议列表。我也可以点击其中一个并选择它。这会将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() 
});
});

1 个答案:

答案 0 :(得分:4)

好的结果是这就是答案,在预先输入功能

下面加上这个
$('input.query').on('typeahead:selected', function (e, datum) {   
console.log(datum['empID']); 
});

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