如何在物化自動完成輸入中設定默認值？

我正在將 ASP .NET MVC 用于我的 Web 應用程式。我正在為 UI 使用 materialize 主題（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() 等設定它。有沒有辦法默認設定它的值？

uj5u.com熱心網友回復：

使用$("#autocompleteInput").autocomplete().val().data('autocomplete')它來選擇默認值。

AJAX 代表異步 JavaScript 和 XML，是一種允許網頁異步更新的技術，這意味著當頁面上只有一小部分資料發生變化時，瀏覽器不需要重新加載整個頁面。

所以實際發生的是，當我使用虛擬資料時，它已經存在并且作業得很好。但是在 ajax 呼叫中，其他所有內容都會在獲取資料之前加載（請通過此鏈接了解呼叫堆疊以完全了解行為）。

所以我在這里做的是，在成功獲取資料后應用自動完成。

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>

標籤：javascript html 查询 自动完成 物化

上一篇：如何在表格中找到最匹配的相鄰行

下一篇：實作導航欄選單的切換狀態