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

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

您基本上链接的是

public function upload()
{
    $title = $this->input->post('title');
    $details = $this->input->post('details');
    $type = $this->input->post('gallery');
    $picture = $_FILES['uploadan']['name'];

    $data = array(
        'url' => $picture,
        'title' => $title,
        'details' => $details,
        'category' => $type
    );

    $this->db->insert('gallery', $data);
}

但是为什么你想要一个select和一个输入才能拥有相同的值，你不能单独使用select吗？

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>