自动完成功能不会将值显示为下拉列表

时间:2020-07-06 17:02:44

标签: javascript frontend jquery-ui-autocomplete

有一个问题,加载我的前端模板后,自动完成下拉列表没有显示值。但是在底部显示

1 result is available, use up and down arrow keys to navigate.

我的html页面中都有jquery-2.2.4.min.js用于我的模板,还有3.3.1 / jquery.min.js用于自动完成 这是我的表格

<form action="<?php echo base_url('index.php/bus/index'); ?>" method="get">
              <input type="text" id="source" class="custom-input" placeholder="Source">
              <input type="text" id="destination" class="custom-input" placeholder="Destination">
              <button type="submit" class="btn my-btn"><i class="fa fa-search pr-2" aria-hidden="true"></i> Search</button>
</form>

以下是我的jQuery代码

<script type="text/javascript">
        jQuery(function($) {
            jQuery("#source").autocomplete({
                focus: function(event, ui) {
                    $('#source').val(ui.item.value);
                },
                select: function(event, ui) {
                    $('#source').val(ui.item.label);
                    return false;
                },
                change: function(event, ui) {
                    if (!ui.item) {
                        $('#source').val("");
                        return false;
                    }
                },
                source: function(request, response) {
                    $.ajax({
                        url: "<?php echo base_url('index.php/bus/autocomplete'); ?>",
                        type: 'post',
                        dataType: "json",
                        data: {
                            search: request.term
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                }
            });
            jQuery("#destination").autocomplete({
                'autoFill': true,
                select: function(event, ui) {
                    $('#destination').val(ui.item.label);
                    return false;
                },
                change: function(event, ui) {
                    if (!ui.item) {
                        $('#destination').val("");
                        return false;
                    }
                },
                source: function(request, response) {
                    $.ajax({
                        url: "<?php echo base_url('index.php/bus/autocomplete'); ?>",
                        type: 'post',
                        dataType: "json",
                        data: {
                            search: request.term
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                }
            });
        });
    </script>

我的回答显示以下值

0: {value: "KALIKAVU"}

0 个答案:

没有答案