1

I am using typeahead on my user database and everything seems to work fine. However, the search I am performing on is the last name of a member.

What I am trying to do is once a user is clicked on, instead of using the last name they entered into the field, I want to have it add the users ID to the field instead.

Is there a way to go about doing this?

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

UPDATE:

The JSON response contains the ID of the user, just not sure how to have the plugin use another value as the final value rather then what you are searching.

3 Answers 3

2

This is what worked for him:

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

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

I also found Bootstrap Typeahead updater not working which recommends the same

NOTE: twitter are deprecating bootstrap/typhead and recommend that you use https://github.com/twitter/typeahead.js with bootstrap 3

0

Add valueKey: 'empID' to your typeahead parameters and that will be the value put into the search box after you select an item from the typeahead

0

EDIT: bootstrap 3 no-longer supports updater. this answer only works for bootstrap 2 typeahead

Overwrite the updater function. and add data-provide="typeahead" to the input

 $('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" />
3
  • I'm using bootstrap 3 if it matters, had to use $('input.query').on('typeahead:selected', function (e, datum) { console.log(datum['empID']); });
    – SBB
    Commented Dec 6, 2013 at 15:04
  • nice but shouldn't have had to, they say to also put data-provide="typeahead" on the input, do you have that?
    – roo2
    Commented Dec 6, 2013 at 15:11
  • @Eru that typeahead functionality does not exist in Bootstrap 3
    – Dhaulagiri
    Commented Dec 6, 2013 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.