选定的自动完成值未显示在输入框中

时间:2017-05-13 07:20:13

标签: php laravel jquery-ui-autocomplete

我正在使用jquery ui自动完成并且值正在显示但是当我从列表中选择一个值时它没有显示在输入框内..我使用console.log进行选择:函数,所选值显示在控制台中但不在输入框内,

我附上了问题的截图,

enter image description here

这里我选择了24并且它在控制台中显示但没有进入输入框内(即附有批号标签的方框)..

脚本是,

<script>
    $(function() {
        var lot_selection = {!! $lot_selection !!};
        $("#lot_number").autocomplete({
            autoFocus: true,
            source: lot_selection,
            minLength: 0,
            select: function (event, ui) {

                 $('#lot_number').val(ui.item.lot_number);
                 console.log($('#lot_number'), ui.item.lot_number);
            }
        })
        .focus(function () {
            $(this).autocomplete("search", "");
        })
        .data("uiAutocomplete")._renderItem = function (ul, item) {
            return $("<li>")
                    .append("<a>" + item.lot_number + "</a>")
                    .appendTo(ul);
        };
    });

</script>

laravel lot_number输入表单代码是

<div class="col-md-2 hidden-print">
    <div class="input-group">
        {!! Form::input('text', 'lot_number', null, array('id' => 'lot_number', 'class' => 'input-lg form-control TabOnEnter', 'placeholder' => 'lot_number','autofocus', 'tabindex' => 1)) !!}
        <span class="input-group-addon">Lot Number</span>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

select: function (event, ui) {
              event.preventDefault();  
             $('#lot_number').val(ui.item.lot_number);
             console.log($('#lot_number'), ui.item.lot_number);
        }

如上所述更改您的选择功能

答案 1 :(得分:1)

<script>
    $(function() {
        var lot_selection = {!! $lot_selection !!};
        $("#lot_number").autocomplete({
            autoFocus: true,
            source: lot_selection,
            minLength: 0,
            select: function (event, ui) {

                 $('#lot_number').val(ui.item.lot_number);
                 console.log($('#lot_number'), ui.item.lot_number);
            }
            focus: function(event, ui) {
                event.preventDefault();
                $("#lot_number").val(ui.item.lot_number);
            }
        })
        .focus(function () {
            $(this).autocomplete("search", "");
        })
        .data("uiAutocomplete")._renderItem = function (ul, item) {
            return $("<li>")
                    .append("<a>" + item.lot_number + "</a>")
                    .appendTo(ul);
        };
    });

</script>

试试这段代码会有所帮助......