jQuery:是否有任何方法可以使用另一个按钮触发select选择器的操作

Question

当我在文本框中写东西时，我试图实际显示选项。当我在文本框中写任何东西时，所有匹配的选项都应该显示出来。

我的代码看起来像

$('#location_from_input').keyup(function() {
var txt = $(this).val().toLowerCase();
$('#location_from>option').each(function() {
var text = $(this).text();
textL = text.toLowerCase();
(textL.indexOf(txt) == 0) ? window.alert(text): $(this).hide();
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selector">
<input type="text" placeholder="Going From" id="location_from_input" />
<select name="location_from" class="full-width" id="location_from" onchange="document.getElementById('location_from_input').value=this.options[this.selectedIndex].text">
<option value="location_1">Location 1</option>
<option value="location_2">Location 2</option>
<option value="location_3">Location 3</option>
</select>
</div>

Answer 1

您无法以编程方式打开<select>。只有用户才能执行此操作。

您想要的功能是在不同的元素类型datalist中，它甚至不需要Javascript：

<label for="myBrowser">Pick your browser:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>