Bootstrap typeahead: show different text in box once selected

Question

I am using bootstrap typeahead to search like this:

 $('.lookup').typeahead({

source: function (query, process) {
    return $.getJSON(
        'json_autocomplete.php',{ query: query },
        function (data) {

            var newData = [];
                $.each(data, function(){

                    newData.push(this.label);
                    //populate hidden field with id
                    $('#contact_id').val(this.id);

                });

            return process(newData);

        });
}

 });

The JSON data looks like this:

 [{"label":"Contact: Jeff Busch-> Busch, Jeff: 1975-11-24","value":"Busch, Jeff","id":"2096"}, ...

It is working great. When the user starts typing the "label" data is shown in a list under the input. HOWEVER, once the user clicks one of the list items, I want the "value" text to appear in the input text box not all the label info that was searched!

Is this possible?

Here's a fiddle:

http://jsfiddle.net/michels287/qdgo651h/

Hopple

What does your html look like? Is this the only script? Maybe a jsfiddle? – Selfemployed

I apologize. I created a fiddle to demonstrate. I like how the 'label' info is show in the downdown as typeahead works, but once an item is selected I'd like to have just the 'value' info to show up in the input. I updated my original question with a fiddle which I hope will help. – Hopple

Answer 1

I will strongly recommend you upgrade to https://github.com/bassjobsen/Bootstrap-3-Typeahead It is the exact same good old bootstrap 2.x typeahead, just maintained and bugfixed in its own repository since bootstrap 3.0 skipped the typeahead in favour to typeahead.js (which BTW no longer is maintained at all). This will make life much easier for you.

After that you can skip all the contortions and simply do this :

$('#contact').typeahead( {
  source: jsonData,
  displayText: function(item) {
    return item.label
  },
  afterSelect: function(item) {
    this.$element[0].value = item.value
  }
}) 

updated fiddle -> http://jsfiddle.net/qdgo651h/1/

---

Updated per comment. I believe you overcomplicate the source part

$('.lookup').typeahead({
  displayText: function(item) {
       return item.label
  },
  afterSelect: function(item) {
      this.$element[0].value = item.value
  },
  source: function (query, process) {
    return $.getJSON('json_autocomplete.php', { query: query }, function(data) {
      process(data)
    })
  }   
})

should do it. Updated fiddle from the comment below -> http://jsfiddle.net/hwbnhbdd/1/ You can use http://myjson.com/ as AJAX source in fiddles as in the update.

Madelynmademoiselle

Thank you. I am trying to adapt your code to my project. I made that fiddle as an example. However, I am remotely getting my data for my typeahead with AJAX and returning the info as JSON. I don't know how to replicate this in fiddle with ajax, but I am showing you in this new fiddle the code I am using. If you look at it, please assume the JSON data at the top is what the ajax call is returning. I also updated the references to bootstrap typeahead 3 per your request. How can I accomplish the same thing in your fiddle with my ajax request? jsfiddle.net/michels287/hwbnhbdd – Hopple

Yes, I overcomplicated that! What a help! Thank you so much! – Hopple

Answer 2

Just return the data on the updater event like this:

    updater: function (item) {
        $('#id').val(map[item].id);

        //Here we return the text to display on the input control
        return map[item].autocomplete;
    },

Aeroembolism