Laravel Combobox Autocomplete Select2 JS

Question

Can you help me? I have the code further down working perfectly.

But when I put inside a modal, I can’t write inside the text field.

VIEW

<select class="itemName form-control" style="width:500px;" name="itemName" required></select>

<a href="#" id="rota" data-target="#modal" data-toggle="modal">Abrir chamado</a>
<div id="modal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <table class="table table-sm table-striped table-hover">
                    <tr>
                        <td><b>categoria:</b></td>
                        <td>
                            <select class="itemName form-control" style="width:500px;" name="itemName"></select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

Controller

public function index()
    {
        $conteudo = Suporte::OrderBy('status', 'asc')->paginate();

        return view('suporte', ['conteudo' => $conteudo]);
    }

    public function dataAjax(Request $request)
    {
        $data = [];
        if($request->has('q')){
            $search = $request->q;
            $data = Categoria::select("id","categoria")
                    ->where('categoria','LIKE',"%$search%")
                    ->get();
        }
        return response()->json($data);
    }

Route

Route::get('/', 'suporteController@index');
Route::get('/select2-autocomplete-ajax', 'suporteController@dataAjax');

JS

<script>
$('.itemName').select2({
        placeholder: 'Select an item',
        ajax: {
            url: 'select2-autocomplete-ajax',
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                return {
                results:  $.map(data, function (item) {
                        return {
                            text: item.categoria,
                            id: item.id
                        }
                    })
                };
            },
            cache: true
        }
    });

</script>

Ajax packages

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Answer 1

Just remove the property tabindex="-1" of your modal div. Changing:

<div id="modal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog">

For:

<div id="modal" class="modal fade bd-example-modal-lg" role="dialog">

Tabindex

The estate tabindex receives an integer value that determines whether the element can receive the focus on the input of the data, determining an order for the elements. Using the tabindex="-1", that is, a negative value the element will not receive the focus when the tab is pressed.

Functioning of tabindex (Pressing tab the order of focus is determined and values that are negative are not used)

<form>  
    <label>1: <input type="text" tabindex="1"/></label>  
    <p/>  
    <label>-1: <input type="text" tabindex="-1"/></label>  
    </p>  
    <label>2: <input type="text" tabindex="2"/></label>  
    </p>  
    <input type="submit" tabindex="3"/>  
</form>