jbowman99's avatar

Select Box changed to a Input text search

I have a select box that is populated by an ajax call to a get method, I would like to change the select box to an Input and autocomplete textbox.

Ajax Call

$(document).ready(function () {
            $(".js-search-items").select2({
                placeholder: 'Find an Item',
                allowClear: true,
                ajax: {
                    type: 'POST',
                    url: '{{ action('\Modules\Admin\Http\Controllers\Restaurant\Menus\ItemsController@postGetItems') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {

                        items = [];

                        $.each($.parseJSON(data), function () {
                            items.push({
                                id: this.ItemID,
                                text: this.ItemName
                            });
                        });

                        return {
                            results: items,
                            pagination: {
                                more: (params.page * 30) < items.length
                            }
                        };
                    },
                    cache: true
                },
                minimumInputLength: 3
            });
        });

current select box


<div class="form-group">
                            {!! Form::label('itemID', 'Name', array('class' => 'col-md-2 control-label')) !!}
                            <select name="itemID" class="noSelect2 js-search-items col-md-4"></select>
                        </div>

can i change the select2 to autocomplete and salvage the script function to grab my data?

I want to do something like

{!! Form::text('itemID', null, ['class' => 'col-md-4', 'placeholder' => 'Search for an Item']) !!}

instead of the select input

0 likes
5 replies
athulpraj's avatar

Try to include the value in this format:

 {!!Form::select('itemid',$itemid,Input::old('itemid'),array('class'=>'col-md-4', 'placeholder' => 'Search for an Item'))!!}

just give the fetched value instead of Input::old('itemid')

jbowman99's avatar

@athulpraj

not sure I follow what you mean?

  {!!Form::select('itemID', $itemID, not sure what goes here instead,array('class'=>'col-md-4', 'placeholder' => 'Search for an Item'))!!}

ricardoarg's avatar

I started with selectize/select2/chosen, and neither worked the way I wanted. I ended doing it from scratch with VUE, and a little CSS. It's a bliss! The input has a v-model="searchstring" with debounce="500", then you watch searchstring and make the ajax call, on the other hand you have a searcheditems array that you populate with the ajax response, and show with a little CSS on the bottom of the input. boom! done! Also I added a couple of options to show a spinner on searching, an option to add a new item, etc.

Please or to participate in this conversation.