Type to search from input box

Question

I have a form where a user can choose their Occupation. The list of occupations are in a seperate .js file like so:

var occupationSelect = "<select id='occupationSelect' onchange='selectChange()' ><option value=''></option><option value='v10173' >AA Patrolman</option><option value='v10174' >Abattoir Inspector</option>

Now in my form I want the input box (as the occupation list is very long) , for the user to type A, B etc and then the relevant occupations come up. Something like the following jsfiddle

Similar JS Fiddle

This fiddle is fine if I put all the Occupations into an array.

However the options in my .js file have values attached for use later in the web application (eg. option value='v10173')

What is the best option to get the Occupation by typing but also to make sure the value is attached.

Answer 1

Edited the js fiddle:

<input name="car" list="anrede" />
<input name="car-val" hidden />
<ul id="anrede"></ul>
var mycars2 = [
['Herr', 'herr'],
['thomas', 'v2345'],
];
var list = $('#anrede');
listHtml = '';
mycars2.forEach(function(item){
 var option = '<li data-val="' + item[1] + '">' + item[0] + '</li>';
 listHtml += option;
});
list.html(listHtml);
$('#anrede li').on('click', function(){
 $('input[name="car"]').val($(this).html());
 $('input[name="car-val"]').val($(this).attr('data-val'));
});

This needs jquery, and the names/values are stored in pairs inside the list.

A hidden input is used for the value.

• conye9980: Could you link to this fiddle? I've copied over and added the jquery url but no luck?
• D. Dan: link. That ul without css is pretty ugly. If you remove the hidden from the second input you can see it's putting there the value.
• conye9980: Thanks, so you're saying removing hidden, then typing Herr should have herr come up in the second input box?
• D. Dan: I just edited the codepen to use datalist as the orginal so the search functionality remains. Thats correct, the value should be added to the second input. Also adding display: block to it in the browser inspector should work.
• conye9980: How would I test this, if I type in Herr, to show that Herr and herr are being input

Answer 2

I would suggest using data-value attribute for the "value" of selected item and array of objects, like so:

var mycars = [
 {
 title: 'Herr',
 value: 'Herr Value'
 },
 {
 title: 'Frau',
 value: 'Frau Value'
 }
];
var list = document.getElementById('anrede');
var input = document.getElementById('carList');
mycars.forEach(function(item) {
 var option = document.createElement('option');
 option.value = item.title;
 option.dataset.value = item.value;
 list.appendChild(option);
});
input.onchange = function() {
 alert(document.querySelector('option[value="' + this.value + '"]').dataset.value)
}

here is the jsfiddle - https://jsfiddle.net/0jvt05L0/302/