CODEWITHSUNDEEP
javascripthtmlinput
conye9980
conye9980

Reputation: 159

Type to search from input box

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.

Upvotes: 0

Views: 303

Answers (2)

MakeLoveNotWar
MakeLoveNotWar

Reputation: 954

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/

Upvotes: 1

D. Dan
D. Dan

Reputation: 189

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.

Upvotes: 1

Related Questions