Input with dropdown option menu

odeselect.js sends GET-request {{value of data-odeselect-url attribute of the hidden input}}?search={{String from the text input}} and waits for JSON-array of options {"key1":"value1","key2":"value2",...}

If option "key":"value" is selected in the dropdown menu, key becomes value of the hidden input, and value becomes value of the text input. Text input becomes readonly. "Cancel" button appear on the right side.

If page is loaded with value in the hidden input, text input also becomes readonly, and "Cancel" button appear on the right side.

If "Cancel" button is clicked, value of hidden input is removed, and text input becomes editable.

Example

Item selector

HTML

<div>
	<input type="hidden" id="select-item-id" name="item_id" value="" data-os-url="example.json" data-os-minlength="2">
	<input type="text" id="select-item" name="item" value="" placeholder="Input more than {{ data-os-minlength }} chars (excluding trimmable white spaces)" class="form-control">
</div>

JS

<script src="[...path...]odeselect.js"></script>
<script>document.getElementById('select-item-id').odeselect()</script>

CSS

Some values have to be changed if Bootstrap is not included

<link rel="stylesheet" type="text/css" href="[...path...]odeselect.css">