Question

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

我们需要某种形式的自动完成功能，以使其成为一个行为类似于文本框的内容，但具有自动建议。

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

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

编辑：回发不是我想要的措辞。我的意思是与原始页面请求一起发送。

编辑2：页面应该优雅地降级。许多解决方案都会“注入”内容，所以没有javascript你就不会得到任何内容。它可能有200多种选择，但至少它们会存在于那里。这就是为什么选择列表的转换是我们理想的原因。

Answer 1

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

jquery autcomplete插件可以将数据作为数组。如果您在.js包含文件中构建适合您要求的数组。

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

Answer 2

根据Steve Willcock的建议使用jQuery autocomplete plugin。输出一个常规选择框，然后在您的脚本中将其替换为文本框，并使用您使用option-elements构建的数组初始化插件。因此，您的数据以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。

Answer 3

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

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

Answer 4

这里的答案非常有用，但是我们在进一步搜索后发现这个插件直接在选择列表上自动运行：

性感组合：http://code.google.com/p/sexy-combo/

演示页：http://phone.witamean.net/sexy-combo/examples/index.html

这将需要更少的工作。

我想将此文件记录下来以供其他人参考。谢谢大家的帮助。

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

4 个答案: