如何让我的网站提示 iphone 相当于下拉菜单？

Posted 2023-05-07

【中文标题】如何让我的网站提示 iphone 相当于下拉菜单？

【英文标题】：How do I make my website prompt the iphone's equivalent of a dropdown menu?

【发布时间】：2012-03-31 01:45:22

【问题描述】：

我有一个使用 AjaxControlToolkit 的网站。我正在为该站点制作一些对 iPhone 友好的并行页面，并且由于 Ajax 在移动浏览器中的外观不是很好，我正试图逐步淘汰它。一个这样的 Ajax 工具是 CalendarExtender，我使用this method 将其替换为 iPhone 的日期选择器。

我需要替换的第二个工具是 AutoCompleteExtender。当用户在文本框中键入文本时，它的作用就像一个简单的下拉菜单。目的是搜索功能；我有一个很大的联系人列表，当用户开始输入姓名或公司名称时，扩展程序会根据用户目前输入的内容显示一个建议列表。

这是它在 Ajax 中的样子：

<asp:TextBox ID="NameTextBox" runat="server" AutoComplete="off" AutoPostBack="True"
                                        OnTextChanged="NameTextBox_TextChanged" Width="95%" Font-Size="Medium"></asp:TextBox>
                                    <cc1:AutoCompleteExtender ID="NameTextBox_AutoCompleteExtender" runat="server" CompletionInterval="250"
                                        CompletionListCssClass="autocomplete_completionListElement" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                                        CompletionListItemCssClass="autocomplete_listItem" DelimiterCharacters="" Enabled="True"
                                        MinimumPrefixLength="2" ServiceMethod="GetCompletionList" ServicePath="" TargetControlID="NameTextBox"
                                        UseContextKey="True">
                                    </cc1:AutoCompleteExtender>

用普通的 iPhone UI（如 UIPickerView）或更通用的移动设备友好的 html 替换它的好方法是什么？

【参考方案1】：

我会使用标准的 HTML 元素来维护用户体验。 对于自动完成部分，我会使用一些 javascript 或 jQuery 插件。您还可以选择使用 jQuery UI 中的自动完成功能：http://jqueryui.com/demos/autocomplete/。

【讨论】：

这看起来应该很好用。我需要看看它如何处理自动完成列表中较大的元素（我列表中的每个元素都是联系人的全名和公司名称）。但是从我的应用程序中查看该演示看起来流畅而清晰，不像 Ajax 工具在这个移动环境中相当严重。