使用输入和选择元素自动完成

Question

这是我的问题：

我得到了这样的表格：

<form>
<input type="search" >
<br>
<select>
<option data-name="USA" value="1">USA</option>
</select>
</form>

在输入中，我想要一个自动完成字段，当我输入“USA”时，我得到了选项的值.. 我该怎么办？

我已经尝试过这个脚本：“http://www.mattkruse.com/javascript/autocomplete/index.html” 但我得到了价值，我不知道如何获得数据名称

这是一张图片：

提前致谢。

Answer 1

你链接的基本上是

$('select').change(function() { 
    $('input').val($(this).find('option:selected').data('name'));
});

但是为什么你希望一个选择和一个输入具有相同的值，你不能只使用选择吗？

Answer 2

这对你来说非常简单和示例代码，我希望它可以帮助你

<form>
    <input type="text" id="search">
    <br>
    <select id="select">
        <option data-name="11" value="1">1</option>
        <option data-name="22" value="2">2</option>
        <option data-name="33" value="3">3</option>
    </select>
</form>

<script>
$(document).ready(function () {  

    $('#search').change(function () {
        $('#select').val($('#search').val());
        var option = $('option:selected', $('#select')).attr('data-name');
        alert(option)
    });
});
</script>