How to set default value in materialize autocomplete input?

Question

I am using ASP .NET MVC for my web application. I am using materialize theme (css and js) for UI. I want autocomplete input and with materialize syntax it,s working perfectly. But I want to select first option on load(using code) and I couldn't find any reference for that. Here's my code.

HTML

            <div class="input-field col s12">
                <label for="autocompleteInput">Chainage Number</label>
                <input type="text" id="autocompleteInput">
            </div>

JS:

  $(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "/Vids/GetChainageNoList",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $.each(response, function (index, item) {
                if (index == 0) {
                    firstChainageVal = item.ChainageNo;
                }
                chainageDataKeys.push(item.ChainageNo);
                chainageDataValues.push(null);
            });
            for (var i = 0; i < chainageDataKeys.length; i++) {
                keyValues[chainageDataKeys[i]] = chainageDataValues[i];
            }
        }
    })
   
    $('#autocompleteInput').autocomplete({
        data: keyValues,
        onAutocomplete: function (val) {
            // Callback function when value is autcompleted.
            AutoCompleteSelectHandler(val)
        },
        selectFirst: true

    })

This is working but I couldn't select its value. I tried to set it using .val(), .value , .text() etc. Is there any way to set its value by default?

Answer 1

User $("#autocompleteInput").autocomplete().val().data('autocomplete') this for selecting a default value.

AJAX, which stands for asynchronous JavaScript and XML, is a technique that allows web pages to be updated asynchronously, which means that the browser doesn't need to reload the entire page when only a small bit of data on the page has changed.

So what actually was happening is, when I was using dummy data, it was there already and working perfectly fine. But in ajax call, everything else gets loaded before getting data (please go through this link about call stack to understand the behavior fully).

So what I did here is, after successfully getting the data then applied auto-complete.

Solution with ajax call:

$(document).ready(function(){
            var chainageDataKeys = [];
            var chainageDataValues = [];
            var keyValues = [];
            $.ajax({
                type: "GET",
                url: "https://restcountries.com/v3.1/all", // dummy ajax calling
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $.each(response, function (index, item) {
                        if (index == 0) {
                            firstChainageVal = item.ccn3;
                        }
                        chainageDataKeys.push(item.ccn3);
                        chainageDataValues.push(null);
                    });
                    for (var i = 0; i < chainageDataKeys.length; i++) {
                        keyValues[chainageDataKeys[i]] = chainageDataValues[i];
                    }
                    //moved the autocomplete part here
                    $('#autocompleteInput').autocomplete({
                        data: keyValues,
                        onAutocomplete: function (val) {
                            // Callback function when value is autcompleted.
                        },
                        selectFirst: true
                    }).val(Object.keys(keyValues)[0]).data('autocomplete');
                }
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>



<div class="input-field col s12">
        <label for="autocompleteInput">Chainage Number</label>
        <input type="text" id="autocompleteInput">
    </div>

Solution With Dummy Data:

//Just used some dummy data for testing

 var keyValues = 
{
"184": null,
"185.01": null,
"185.76": null,
"186.3": null
};

    $( "#autocompleteInput" ).autocomplete({
      data: keyValues,
        onAutocomplete: function (val) {
            // Callback function when value is autcompleted.
            
        },
        selectFirst: true
    }).val(Object.keys(keyValues)[0]).data('autocomplete'); 
    //this will take first item from keyValues as default value
    
    console.log(Object.keys(keyValues)[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>


<div class="input-field col s12">
                <label for="autocompleteInput">Chainage Number</label>
                <input type="text" id="autocompleteInput">
            </div>