Combobox test 4 - Datalist JSON suggestion - Research and finding

• Edit this page
• Revision history
• Questions or comments?

Prototype of an input with a datalist transformed into a customized combobox with the listbox pattern.

According to spec a datalist is an implementation of a listbox as emulated by this combobox. But by using the combobox you are able to have consistant behaviour across browser.

To understand better the example bellow, you need to separate the data source (list of suggestion) with the behaviour you expect when interacting with that data source

Default

Default - Template outside the datalist

Default - Template customized

Show after x character is typed

With a limit

Any - Filter type

start with - Filter type

word - Filter type

Comparaison with wb-suggest feature

This is very quite the simlar of the wb-suggest feature as it was published on march 2018 on gcweb. The difference is the user interaction behaviours is better controled with the combobox across browser. With the availibility of this plugins and considering the wb-suggest has not be released with an official release of WET, it is at high risk be dropped. Here how to reproduce the basic of the wb-suggest plugin.

<form action="#">
	<div class="form-group">
		<label for="input-id-1">Surveys</label>
		<input id="input-id-1" list="datalist-id-1" />
	</div>
	<datalist id="datalist-id-1" data-wb-suggest="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
		<template>
			<option></option>
		</template>
	</datalist>
</form>

<form action="#">
	<div class="form-group">
		<label for="input-id-1">Surveys</label>
		<input id="input-id-1" list="datalist-id-1" />
	</div>
	<datalist id="datalist-id-1"  data-wb-json='{
		"url": "//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions",
		"mapping": [
			{ "selector": "option", "value": "/@value" },
			{ "selector": "option", "attr": "value", "value": "/@value" },
			{ "selector": "option", "attr": "label", "value": "/@value" }
		]
	}'>
		<template>
			<option></option>
		</template>
	</datalist>
</form>

Source code

<h2>Default</h2>
<form action="#">
	<div class="form-group">
		<label for="input-id-1">Surveys</label>
		<input class="wb-combobox" id="input-id-1" list="datalist-id-1" />
	</div>
	<datalist id="datalist-id-1" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
		<option value="horay"></option>
		<template>
			<option data-wb5-for="opt in datalist.options" data-wb5-selectvalue="{{ opt.value }}">{{ opt.value }}</option>
			<option data-wb5-for="opt in wbLoad" data-wb5-selectvalue="{{ opt }}">{{ opt }}</option>
		</template>
	</datalist>
</form>

<h2>Default - Template outside the datalist</h2>
<form action="#">
	<div class="form-group">
		<label for="input-id-1a">Surveys</label>
		<input class="wb-combobox" id="input-id-1a" list="datalist-id-1a" />
	</div>
	<datalist id="datalist-id-1a" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions" data-wb5-template="template-id-1a">
		<option value="horay"></option>
	</datalist>
	<template id="template-id-1a">
		<option data-wb5-for="opt in datalist.options" data-wb5-selectvalue="{{ opt.value }}">{{ opt.value }}</option>
		<option data-wb5-for="opt in wbLoad" data-wb5-selectvalue="{{ opt }}">{{ opt }}</option>
	</template>
</form>


<h2>Default - Template customized</h2>
<form action="#">
	<div class="form-group">
		<label for="input-id-1b">Surveys</label>
		<input class="wb-combobox" id="input-id-1b" list="datalist-id-1b" />
	</div>
	<datalist id="datalist-id-1b" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions" data-wb5-template="template-id-1b">
		<option value="horay"></option>
	</datalist>
	<template id="template-id-1b">
		<ul>
			<li data-wb5-for="opt in datalist.options" data-wb5-selectvalue="{{ opt.value }}">{{ opt.value }}</li>
			<li data-wb5-for="opt in wbLoad" data-wb5-selectvalue="{{ opt }}">{{ opt }}</li>
		</ul>
	</template>
</form>

<h2>Show after x character is typed</h2>
<form action="#">
	<div class="form-group">
		<label for="input-id-1c">Surveys</label>
		<input class="wb-combobox" id="input-id-1c" list="datalist-id-1c" data-wb-open-min-len="2" />
	</div>
	<datalist id="datalist-id-1c" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions" data-wb5-template="template-id-1c">
		<option value="horay"></option>
	</datalist>
	<template id="template-id-1c">
		<ul>
			<li data-wb5-for="opt in datalist.options" data-wb5-selectvalue="{{ opt.value }}">{{ opt.value }}</li>
			<li data-wb5-for="opt in wbLoad" data-wb5-selectvalue="{{ opt }}">{{ opt }}</li>
		</ul>
	</template>
</form>

<h2>With a limit</h2>

<form action="#">
	<div class="form-group">
		<label for="input-id-2">Surveys</label>
		<input class="wb-combobox" data-wb-limit="4" id="input-id-2" list="datalist-id-2">
	</div>
	<datalist id="datalist-id-2" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
		<template>
			<ul>
				<li data-wb5-for="opt in wbLoad" data-wb5-selectvalue="{{ opt }}">{{ opt }}</li>
			</ul>
		</template>
	</datalist>
</form>

<h2>Any - Filter type</h2>

<form action="#">
	<div class="form-group">
		<label for="input-id-3">Surveys</label>
		<input class="wb-combobox" data-wb-filter-type="any" id="input-id-3" list="datalist-id-3">
	</div>
	<datalist id="datalist-id-3" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
		<template>
			<ul>
				<li data-wb5-for="opt in wbLoad" data-wb5-selectvalue="{{ opt }}">{{ opt }}</li>
			</ul>
		</template>
	</datalist>
</form>

<h2>start with - Filter type</h2>
<form action="#">
	<div class="form-group">
		<label for="input-id-4">Surveys</label>
		<input class="wb-combobox" data-wb-filter-type="startWith" id="input-id-4" list="datalist-id-4">
	</div>
	<datalist id="datalist-id-4" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
		<template>
			<ul>
				<li data-wb5-for="opt in wbLoad" data-wb5-selectvalue="{{ opt }}">{{ opt }}</li>
			</ul>
		</template>
	</datalist>
</form>


<h2>word - Filter type</h2>
<form action="#">
	<div class="form-group">
		<label for="input-id-5">Surveys</label>
		<input class="wb-combobox" data-wb-filter-type="word" id="input-id-5" list="datalist-id-5">
	</div>
	<datalist id="datalist-id-5" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
		<template>
			<ul>
				<li data-wb5-for="opt in wbLoad" data-wb5-selectvalue="{{ opt }}">{{ opt }}</li>
			</ul>
		</template>
	</datalist>
</form>