写一个jquery 监听输入框 下拉选择

以下是一个简单的示例，演示如何使用jQuery监听输入框并下拉选择：

HTML代码：

<input id="my-input" type="text" />
<select id="my-select">
  <option value="option-1">选项1</option>
  <option value="option-2">选项2</option>
  <option value="option-3">选项3</option>
</select>

jQuery代码：

$(document).ready(function() {
  // 监听输入框的键盘输入事件
  $('#my-input').on('keyup', function() {
    var inputVal = $(this).val(); // 获取输入框的值
    if (inputVal.length > 0) {
      $('#my-select').show(); // 显示下拉列表
    } else {
      $('#my-select').hide(); // 隐藏下拉列表
    }
  });
  
  // 监听下拉列表的选择事件
  $('#my-select').on('change', function() {
    var selectedVal = $(this).val(); // 获取选中的值
    $('#my-input').val(selectedVal); // 将选中的值填入输入框
    $(this).hide(); // 隐藏下拉列表
  });
});

解释：

1. 首先，在输入框和下拉列表中分别添加了ID，以便使用jQuery选择器进行操作。
2. 在文档准备就绪后，使用`on()`函数为输入框绑定了一个键盘输入事件。
3. 在事件处理函数中，使用`val()`函数获取了输入框的值，并根据其长度来判断是否显示下拉列表。
4. 同样使用`on()`函数为下拉列表绑定了一个选择事件。
5. 在事件处理函数中，使用`val()`函数获取了选中的值，并将其填入输入框中。
6. 最后，使用`hide()`函数隐藏了下拉列表。

注意事项：

1. 如果下拉列表是通过Ajax加载的，则需要在选择事件处理函数中添加获取数据的代码。
2. 在显示和隐藏下拉列表时，建议使用CSS中的`display`属性而不是jQuery的`show()`和`hide()`函数，以避免样式闪烁问题。