Bootstrap typeahead为隐藏字段添加值

Bootstrap typeahead add value to hidden field

本文关键字：添加 字段 隐藏 typeahead Bootstrap      更新时间：2024-04-16

我在用户数据库中使用了typeahead，一切似乎都很好。然而，我正在执行的搜索是一个成员的姓氏。

我想做的是，一旦用户被点击，我想让它将用户ID添加到字段中，而不是使用他们在字段中输入的姓氏。

有办法做到这一点吗？

$('input.query').typeahead({
    name: 'query',
    value: 'lastName',
    remote: 'jsonUser.php?query=%QUERY',
    minLength: 3,
    template: ["<div class='typeahead_wrapper'>", 
                "<img class='typeahead_photo' src='http://localhost/iwebimage.axd?qid={{qid}}'/>", 
                "<div class='typeahead_labels'>", 
                "<div class='typeahead_primary'>{{firstName}} {{lastName}} <small>({{ntid}})</small></div>", 
                "<div class='typeahead_secondary'>{{department}}</div>", 
                "</div>", 
                "</div>", ].join(''),
    engine: Hogan,
    limit: 8,
    valueKey: 'lastName'
});

更新：

JSON响应包含用户的ID，只是不确定如何让插件使用另一个值作为最终值，而不是您正在搜索的值。

这就是对他有效的方法：

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

我还发现Bootstrap Typeahead更新程序不起作用，它建议使用相同的

注意：twitter反对bootstrap/tyhead，并建议您使用https://github.com/twitter/typeahead.js带有引导程序3

将valueKey: 'empID'添加到您的预编型参数中，这将是您从预编型中选择项目后放入搜索框的值

编辑：bootstrap 3不再支持更新程序。这个答案只适用于引导程序2预编型

覆盖更新程序函数。并将CCD_ 2添加到输入

 $('input.query').typeahead({
     updater: function(item) {
        //item the json object that the user selected
        return item.id; // set input's value to item.id
      },
      //....
 )};

Html

<input class="query" data-provide="typeahead" />
相关文章：