TextInput with autocomplete support?

How-to Discussions
1

Hi

I need a textinput with autocomplete support. Users will enter part of a city name. My APP will search in a list of cities and show a list of cities which match the entered text.
It is something like https://github.com/apasccon/SearchTextField

Does fusetools support this?

thanks!

2

This should be a pretty trivial task. I’d look into listening to Observable changes from an input, and then searching through your list based on what the user has entered.

Here, have a quick example:

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var input = Observable("");
		var alternatives = Observable();

		var database = [
			"Seattle",
			"New York",
			"Tokyo",
			"Oslo",
			"London",
			"Amsterdam",
			"New Dehli",
			"Seoul"
		];

		input.addSubscriber(function(val) {
			alternatives.replaceAll(database.filter(function(value) {
				return value.toLowerCase().includes(val.value);
			}));
		});
		module.exports = {
			input: input,
			alternatives: alternatives
		}
	</JavaScript>
	<ClientPanel>
		<StackPanel>
			<Text FontSize="20">Search</Text>
			<TextInput Value="{input}" />
			<Each Items="{alternatives}">
				<Text Value="{}" />
			</Each>
		</StackPanel>
	</ClientPanel>
</App>
3

In addition to what Liam posted, I would like to suggest instead of using .addSubscriber(), which requires you to .removeSubscriber() yourself or your app will be leaking memory, you should go with .onValueChanged(), which automatically ties the lifetime of the subscription to the instance of the module. Like so:

input.onValueChanged(module, function(val) {
    alternatives.replaceAll(database.filter(function(value) {
        return value.toLowerCase().includes(val);
    }));
});