使用 ajax 在下拉列表中进行实时搜索答案

【问题标题】：live search in dropdown using ajax使用 ajax 在下拉列表中进行实时搜索
【发布时间】：2019-10-05 22:40:15
【问题描述】：

如何使用此代码进行 ajax 实时搜索，选择选项？

<script type="text/javascript">
$j(document).ready(function() {
    $j('#keyword').on('input', function() {
        var searchKeyword = $(this).val();
        if (searchKeyword.length >= 0) {
            $.post('search.php', { keywords: searchKeyword }, function(data) {
                $j('ul#content').empty()
                $.each(data, function() {
                    $j('ul#content').append('*<a href="reserve.php' + this.id + '">' + this.title + '</a>');
                });
            }, "json");
        }
    });
});
</script>

此代码适用于输入类型['text']，例如：

 <input type="text" class="form-control" id="keyword" />

但我希望它可以使用：

<select name="field" id="keyword">
<option value="1">sometext</option>
<option value="2">sometext</option>
<option value="3">sometext</option>
<option value="4">sometext</option>
</select>

如何使用上述代码获取所选选项的值？

【问题讨论】：

问题是事件没有触发还是您没有得到想要的结果？
我想我无法将所选选项的值发布到 php 文件上。
您希望您的价值是1, 2, 3, or 4 还是sometext？
这些是数据库中的 1,2,3,4。我需要这个值。
如果你在定义searchKeyword 之后执行console.log(searchKeyword)，你的控制台会显示什么？

标签： javascript html ajax

【解决方案1】：

<script type="text/javascript">
$j(document).ready(function() {
$j('#keyword').on('change', function() {
    var searchKeyword = $("#keyword option:selected").val();;
    if (searchKeyword.length >= 0) {
        $.post('search.php', { keywords: searchKeyword }, function(data) {
            $j('ul#content').empty()
            $.each(data, function() {
                $j('ul#content').append('*<a href="reserve.php' + this.id + '">' + this.title + '</a>');
            });
        }, "json");
    }
});
});
</script>

【讨论】：