使用 web api 自动完成文本框

Posted 2023-04-13

【中文标题】使用 web api 自动完成文本框

【英文标题】：Autocomplete Textbox using 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 更好地理解它。再次感谢您:-)

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