使用 web api 自动完成文本框答案

【问题标题】：Autocomplete Textbox using web api使用 web api 自动完成文本框
【发布时间】：2019-11-08 08:16:15
【问题描述】：

我正在尝试使用 web api 创建一个自动完成文本框。我检查了很多网站，但我仍然什么都不懂。我的 web api 包含格式的数据 "[{\"sl_no\":\"305\"},{\"sl_no\":\"305\"},{\"sl_no\":\"3056\"},{\"sl_no\" :\"3057\"},{\"sl_no\":\"3305\"}]"

我希望在输入文本时自动完成文本框，例如。 text=305 那么它应该给出其余的选项，即 3056,3057,3305

我正在尝试使用 jquery 自动完成小部件来做到这一点

【问题讨论】：

jquery 自动补全教程有很多，这里给你一个。 c-sharpcorner.com/UploadFile/rahul4_saxena/…
widget's page 中有很多 sn-ps、示例 e 文档。如果你什么都不懂，你应该先试试javascript基础知识。
感谢 cmets 和动力，非常感谢。我正在寻找直接代码而没有尝试太多。现在我得到了一个带有 html datalist 的工作示例。我正在通过 jquery bsics 更好地理解它。再次感谢您:-)

标签： c# jquery json

【解决方案1】：

要实现 Google Places 自动填充文本框，您首先需要一个 API 密钥，该密钥可在 Google API 网站上获得。您需要做的就是通过填写您所需的个人信息来注册一个。获得 API 密钥后，您只需进入 API 库并启用场所 API。完成后将以下代码复制并粘贴到您的 Asp.Net MVC 应用程序的视图中...

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&Key=YOURAPIKEY"></script>  
<script type="text/javascript">  
        google.maps.event.addDomListener(window, 'load', function () {  
            var options = {  
                types: ['(cities)'],  
                componentRestrictions: { country: "sa" }  
            };  

            var input = document.getElementById('Address');  
            var places = new google.maps.places.Autocomplete(input, options);  


        });  
</script>

复制并粘贴此代码后，在其状态所在的所需位置填写您的 API 密钥 (Key=YOURAPIKEY)。完成后，您现在可以运行您的应用程序，它应该像这样出现...... enter image description here

【讨论】：