Value being used as label on selectcomplete

I have a JSON endpoint that’s returning data in the following format:

[{
   id: 1,
   name: "Bob"
}]

And I’m using the following code:

window.addEventListener("awesomplete-selectcomplete", function(e) {
	window.location.href = '/my-path/' + e.text.value;
}, false);

var ajax = new XMLHttpRequest();
ajax.open("GET", "/data.json", true);
ajax.onload = function() {
	new Awesomplete(document.querySelector("#search"), {
		list: JSON.parse(ajax.responseText).map(function(i) { return i; }),
		data: function (item, input) {
			return { label: item.name, value: item.id };
		}
	});
}
ajax.send();

When I select an option, the value (id) is showing up in the textbox rather than the label (name). I’d still like it to use the label, just to pass the id through as the value to the listener. Is there some way to do this?

[vlazar]

@jfi @joezsweet @LeaVerou If I understood correctly what needs to be done, no need for fixes to Awesomplete.

When I select an option, the value (id) is showing up in the textbox rather than the label (name). I’d still like it to use the label, just to pass the id through as the value to the listener. Is there some way to do this?

What’s inserted into the input is controlled by the replace method. By default it inserts value, you’ll need to provide a custom method which will insert label instead:

replace: function(suggestion) {
  this.input.value = suggestion.label;
},

See demo here: https://jsfiddle.net/1agrns7n/

[dillydadally]

I feel like the current default behavior for this is very counter intuitive. A combobox is supposed to mimic the behavior of a select with added features. Ideally, a user who doesn’t use the added features should not even realize it isn’t a normal select. A select uses the value as an underlying id of sorts that you can get and send to the server. As such, the value in Awesomplete should be underlying while the label is put in the input box, just like a select.

The difficulty is Awesomplete is an autocomplete first and a combobox second, meaning there is no current functionality to track a selected index. Ideally, when you select an item in the list, or just fully type out an item so that it matches a value in the list, there should be an underlying index and possible related value stored within the Awesomplete. If the input does not match anything in the list, the index should be -1 or false. This might represent a significant change though, so maybe there’s an easier way to do it.

For example, we could add an id field or maybe we allow users to attach whatever they want in each data object instead of just label and value. Then, they can use awesomplete-selectcomplete to pop it in a hidden object. The two problems with this approach though are:

1. If the user types an entire option without selecting it, it should still get the id on blur. This means there would need to be a function to call to see if the current value in the input matches any labels in the autocomplete list (which there probably should be anyway, for cases such as when you want to enforce that the final value matches something in the list). The function would need to return the data object so you could get the id value of the matched element.

2. This represents a sizeable amount of extending for what seems like it should be built in if Awesomplete is to support combobox functionality. You would have to use awesomplete-selectcomplete to store the value and attach another onBlur event to check if the typed value is in the list. As @jfi mentioned, this is behavior that is expected, which means many people might turn away from Awesomplete without even realizing this functionality could be implemented. An extended combobox example in the docs could help.