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

Question

我正在将 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() 等设置它。有没有办法默认设置它的值？

Answer 1

用户$("#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>