Question

我在我的用户数据库上使用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，不知道如何让插件使用其他值作为最终值，而不是您正在搜索的内容。

Answer 1

这对他有用：

  $('input.query').on('typeahead:selected', function (e, datum) {   

     console.log(datum['empID']); 
  });

我还发现Bootstrap Typeahead updater not working建议采用相同的

注意：Twitter正在弃用bootstrap / typhead并建议你使用https://github.com/twitter/typeahead.js和bootstrap 3

Answer 2

编辑：bootstrap 3不再支持更新程序。这个答案仅适用于bootstrap 2 typeahead

Overwrite the updater function.并将data-provide="typeahead"添加到输入

 $('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" />

Answer 3

将valueKey: 'empID'添加到您的预先输入参数，这将是您从预先输入

中选择项目后放入搜索框的值

Bootstrap typeahead为隐藏字段添加值

3 个答案: