如何在实现自动完成输入中设置默认值？

Question

我正在为我的 Web 应用程序使用 ASP .NET MVC。我正在为 UI 使用物化主题（css 和 js）。我想要自动完成输入并使用物化语法它完美地工作。但是我想在加载时选择第一个选项（使用代码），但我找不到任何参考。 这是我的代码。

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

    })

这是有效的，但我无法选择它的值。我尝试使用 .val(), .value , .text() 等设置它。有没有办法默认设置它的值？

Answer 1

用户$("#autocompleteInput").autocomplete().val().data('autocomplete')这个用于选择默认值。

AJAX，代表异步JavaScript和XML，是一种允许网页异步更新的技术，这意味着当页面上只有少量数据时，浏览器不需要重新加载整个页面。改变了。

所以实际发生的情况是，当我使用虚拟数据时，它已经存在并且运行良好。但是在 ajax 调用中，其他所有内容都会在获取数据之前被加载（请通过此link about call stack 以完全了解行为）。

所以我在这里所做的是，在成功获取数据后应用自动完成。

ajax 调用解决方案：

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

使用虚拟数据的解决方案：

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