如何在具体化自动完成输入中设置默认值？

Question

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

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

    })

这是有效的，但我无法 select 它的价值。我尝试使用 .val()、.value、.text() 等来设置它。有什么方法可以默认设置它的值吗？

Answer 1

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

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.

所以实际发生的事情是，当我使用虚拟数据时，它已经存在并且工作得很好。但是在 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>

如何在具体化自动完成输入中设置默认值？

How to set default value in materialize autocomplete input?

html

javascript

jquery

autocomplete

materialize