如何仅使用原始页面请求在 ASPX 中自动完成？

Posted 2023-04-13

技术标签:

【中文标题】如何仅使用原始页面请求在 ASPX 中自动完成？【英文标题】：How to autocomplete in ASPX with original page request only? 【发布时间】：2010-10-24 00:31:17 【问题描述】：

我们正在开发一个 ASPX (.NET 2.0) 页面，其中包含一个包含太多元素 (200+) 的选择列表。

我们需要某种形式的自动完成功能将其变成类似于文本框但带有自动完成建议的东西。

我们想使用 JQuery。到目前为止，我们的搜索只出现了需要某种后端服务、额外请求（在 AJAX 中）等的自动完成功能。我们更愿意通过页面请求一次提供所有数据。理想情况下，它将作为选择列表条目。

是否有可以转换选择列表的自动完成框？或者有没有办法将自动完成连接到页面上已经存在的数据（在带有 .NET 2.0 的 ASPX 中），这样它就不必访问外部资源？

编辑：回传不是我要寻找的措辞。我的意思是与原始页面请求一起交付。

编辑 2：页面应该正常降级。那里的许多解决方案“注入”内容，因此如果没有 javascript，您将无法获得任何内容。可能有 200 多种选择，但至少它们会存在。这就是为什么选择列表的转换是我们的理想选择。

【问题讨论】：

【参考方案1】：

按照 Steve Willcock 的建议使用 jQuery autocomplete plugin。输出一个常规选择框，然后在您的脚本中将其替换为文本框，并使用您构建的数组初始化插件，如果选项元素。因此，您的数据以select 的形式出现：

<select size="1" id="options" name="options">
  <option>Option #1</option>
  <option>Option #2</option>
  <option>Option #3</option>
  <option>Option #4</option>
  <option>Option #5</option>
  <option>Option #6</option>
  <option>Option #7</option>
</select>

...然后你像这样转换它：

$(function()
  // execute once the DOM is ready...

  // build array of option texts
  var options = [];
  $("#options option").each(function()
    options.push($(this).text());
  );

  // build an input field, replace the select with it,
  // and wire up autocomplete.
  $("<input id='options' name='options' type='text'>")
    .replaceAll("#options")
    .autocomplete(options, autoFill: true);  
);

...没有JS？没问题 - 你仍然有你的 select。

【讨论】：

【参考方案2】：

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

jquery autcomplete 插件可以将数据作为一个数组。如果您在 .js 包含文件中构建数组，则应该满足您的要求。

例如，查看the demo page - 检查“多个城市（本地）”部分以及那里使用的 localdata.js 文件。

【讨论】：

或者在你的页面输出中包含数组。确实，是的，你也可以在页面中使用脚本标签好的，我明白你的意思，这是一个选项。问题是这些（如在带有 noscript 的演示页面上所见）不会优雅地降级。数据消失了，因为它不是由脚本注入的。编辑了原文以反映这一点。【参考方案3】：

有许多第三方控件（我们使用 ComponentArt 的 WebUI 工具包中的一个）可以为您提供自动完成组合框功能。

您也可以使用 AJAX 技术实现相同的想法，从而避免完整的回发。

【讨论】：

道歉 - 我不是说回发，编辑以反映这一点。我的意思是在一个请求中与页面一起交付。【参考方案4】：