javascript - 从输入框中输入要搜索的内容

Question

我有一个表单，用户可以在其中选择他们的职业。职业列表位于单独的 .js 文件中，如下所示:

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

现在在我的表单中，我想要一个输入框(因为职业列表很长)，让用户输入 A、B 等，然后相关职业就会出现。类似于下面的 jsfiddle

Similar JS Fiddle

如果我将所有职业放入一个数组中，这个 fiddle 就可以了。

但是，我的 .js 文件中的选项附加了值，以便稍后在 Web 应用程序中使用(例如，选项值='v10173')

通过键入获取职业并确保附加该值的最佳选项是什么。

Answer 1

编辑了 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'));
});

这需要 jquery，并且名称/值成对存储在列表中。

该值使用隐藏输入。