CODEWITHSUNDEEP
phplaraveljquery-ui-autocomplete
Maniraj Murugan
Maniraj Murugan

Reputation: 9084

Selected autocomplete value not displaying in input box

I am using jquery ui autocomplete and the values were displaying but when i select a value from the list it is not displaying inside the input box.. I used console.log for select : function , the selected value is displayed in console but not inside the input box,

I have attached a screenshot of the issue,

enter image description here

Here i have selected 24 and it is displaying in console but not coming inside the input box (i.e, box attached with Lot Number label)..

The script was,

<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>

And the laravel lot_number input form code was,

<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>

Upvotes: 2

Views: 1073

Answers (2)

Nawin
Nawin

Reputation: 1692

<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>

Try this code it will help...

Upvotes: 1

niranchan
niranchan

Reputation: 296

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

Change your select function as like above

Upvotes: 2

Related Questions