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

Posted 2023-05-07

【中文标题】如何在实现自动完成输入中设置默认值？

【英文标题】：How to set default value in materialize autocomplete input?

【发布时间】：2021-12-15 22:38:58

【问题描述】：

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

【参考方案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>

【讨论】：

嗨@TBA，感谢您的回复。我在最后尝试了这个，但没有奏效。我使用键值对作为字典。这可能是原因。所以我的 KeyValues 就像 "Number123",null

@Jass 你想显示什么作为默认值？整个键值对还是只是键或值？

我只想显示“Number123”。但是在设置数据的时候，我认为我们必须同时使用key和value

@Jass 澄清一下，你得到这样的数据了吗 - keyValues = [key: key1, value: value1, key: key2, value: value2]; ?

不@TBA，我只会和你分享文档图片。