Allow accessing attributes of the data object associated with a typeahead field

[timfee]

I'm creating a location auto select field, but would like to be able to access the underlying ID:

{
   "city":"Dorchester",
   "state":"Massachusetts",
   "country":"United  States",
   "tokens":["Dorchester","Massachusetts"],
   "value":"Dorchester, Massachusetts"
   "id":1359823
}

I need to collect the ID of the item, while displaying a different value to the user.

Would be a handy addition (especially for location auto completes!)

[jharding]

When would you be accessing id?

[timfee]

I want the id of the item that was autocompleted (either by pressing enter, clicking or pressing the right arrow to accept the current hint text) so that I can do something with the data they entered.

Perhaps if there was an event triggered when the user accepted a suggestion that exposed how the suggestion was made (clicked, keyboard enter, keyboard arrow) as well as the query text, the suggestion.value and the JSON object behind the data itself, that would be useful.

I'm working on a (very dirty!) fix right now—in the renderSuggestions function of DropdownView, I am manually specifying the ID via:

                utils.each(suggestions, function(i, suggestion) {
                        console.log(suggestion);
                        elBuilder.innerHTML = dataset.template.render(suggestion);
                        el = elBuilder.firstChild;
                        el.setAttribute("data-value", suggestion.value);
                       // My code
                        el.setAttribute("data-locationid", suggestion.locationid);
                       // ----
                        fragment.appendChild(el);
                    });

And then keeping it along for the ride in formatDataForSuggestion:

        function formatDataForSuggestion($suggestion) {
            var $suggestions = $suggestion.parents(".tt-suggestions").first();
            return {
                value: $suggestion.data("value"),
                query: $suggestions.data("query"),
                dataset: $suggestions.data("dataset"),
                // My code
                locationid: $suggestion.data("locationid"),
                ---
            };
        }

I'm off to play a bit in the various suggestion handlers (under cursor, when clicked, etc) to grab the ID and then pass it to a function that will consume the ID and use it to update the display.

I suppose the desired functionality I'm really looking for (which might not be in scope of the control itself) would be to have a field where users are forced to make a selection from the closed set of options within it -- and to be able to be aware of all of the attributes of the option that was selected.

I hope I did an OK job explaining this and that my hack didn't cause you to break out in any hives. Let me know if I can provide more data or a more concrete use case.

[jharding]

Seems like #68 would be of interest to you.

Keep in mind that the purpose of typeahead.js is to improve the usability of search inputs – it wasn't built to be a substitute for a select menu.

[jharding]

I'm going to close this as the typeahead:selected event was added and that should address the issue you brought up here. I will say that based on the use case you described, it sounds like something like Select2 would be a better fit than typeahead.js.