create autocomplete using laravel and javascript

this is an element to display the data description which will appear if I click on select on the code element

<input type="text" name="uraian" id="desc"  class="form-control">

The reason is I hope the explanation from my thread is clearer about what I want

I have a table with the name classifications

for example like this

id		  						kode											uraian
1 								B-32131										sample data

then I do a foreach to display the code value in the selected option

<div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Kode Klasifikasi</label>
                                    <select name="kode_klasifikasi" id="kodeklas" class="form-control">
                                        <option value="">Silahkan Masukan Kode Klasifikasi</option>
                                        @foreach($class as $clas)
                                            <option value="{{$clas->id}}">{{$clas->kode}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

when i click value

B-32131

then the description value will appear in

<div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Uraian</label>
                                    <input type="text" name="uraian" id="desc"  class="form-control">

                                </div>
                            </div>

So, the description value mentioned is {{$clas->kode}}?

If yes then, try this

$("#kodeklas").change(function () {
  $("#desc").val($("#kodeklas option:selected").text());
});

<script type="text/javascript">
    $(document).ready(function(){
      $('#kodeklas').on('change', function(){
        var id = $(this).val();
        if(id == '')
        {
          $('#uraian').prop('disabled',true);
        }
        else
        {
          $('#uraian').prop('disabled',false);
          $.ajax({
            url:"{{route('autocomplete')}}",
            type:"POST",
            data:{'id' : id},
            dataType:'json',
            success: function(data){
              // alert('ok');
              $('#uraian').html(data);
            },
            error: function(data){
              alert('Error ');
            }
          });
        }
      });
    });
</script>

Just posting the codes wouldn't help. At least with some descriptions?

What is the id of the input?

The argument to pass into the jquery selector is the concatenation of # + element.id

For example: it should be $('#desc').val();

 <input type="text" name="uraian" id="desc"  class="form-control">

Also, I don't know how your API works.

Assuming the data return from the API is

{
	"classification": {
		"id":1,
		"kode":"B-32131",
		"uraian": "Sample description"
	}
}

Your script should be:

 success: function(data){
              // alert('ok');
              $('#uraian').val(data.uraian);
   			},

Please remind that

I try to explain..

$('#kodekls').on('change', function(){
            var id = $(this).val();
            if(id == '')
            {
            $('#desc').prop('disabled',true);
            }
            else
            {
            $('#desc').prop('disabled',false);

explanation

var id i get from the value given by id="kodeekls"
<option value="{{$clas->id}}">{{$clas->kode}}</option>

if(id == '')
            {
            $('#desc').prop('disabled',true);
            }
            else
            {
            $('#desc').prop('disabled',false);

if the id value from this code is empty

then the input element
<input type="text" style="visibility:hidden" name="uraian" id="desc"  class="form-control">
stay hidden, 
but if the id that comes from the element id="kodekls" is true then
<input type="text" style="visibility:hidden" name="uraian" id="desc"  class="form-control">

will appear and display the value of the uraian field

through

url:"{{route('autocomplete')}}",

the result of the url above is

[
	{
		"id":1,
		"kode":"KS-21001",
		"uraian":"untuk membeli buahan",
		"created_at":"2021-09-05 04:31:32",
		"updated_at":"2021-09-05 04:42:44"
	}
]

although when i run i don't get any error when i see console or network

but the input desc form element still reads hidden
sorry maybe i look stupid

@fajar because you didn't ask it to show.

https://www.w3schools.com/jquery/jquery_hide_show.asp

 success: function(data){
 
              $('#desc').prop("disabled",false).show().val(data[0].uraian);
   			},

Also, you are using input box, use .val() instead of .HTML()

https://www.w3schools.com/jquery/html_val.asp

finished, I tried again to change my code to be like this

<script>
        $(document).ready(function(){
                $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $("select").on('change', function(){
                    var id = $(this).val();
                    $.ajax({
                        url:"{{route('autocomplete')}}",
                        type:"POST",
                        data:{'id' : id},
                        dataType:'json',
                        success: function(data){
                            $('#desc').show().val(data[0].uraian);
                        },
                        error: function(data){
                            alert('Error ');
                        }
                    });
                });
        });
    </script>