asp.net 中的列表框自动填充功能答案

【问题标题】：Autofill feature with Listbox in asp.netasp.net 中的列表框自动填充功能
【发布时间】：2013-01-03 03:05:48
【问题描述】：

我有一个列表框，其中的项目是从数据库表中加载的“名字”，

现在我想要一个自动填充功能，如果用户键入“a”，所有以“a”开头的名字都应该显示在列表框中
点击某个按钮后，原始数据应重新填充到列表框中

对于第二个，即重新填充希望我可以用下面的代码做

protected void btnRePopulate_Click(object sender, EventArgs e)
{
    DataSet oDs = ReadDataSet();
    Listbox1.DataTextField = "Name";
    Listbox1.DataValueField = "ID";
    Listbox1.DataSource = oDs;
    Listbox1.DataBind();
}

但是对于第一个我有一些我正在工作的事情（我正在使用文本框 keyup 事件在用户键入“a”或其他内容时触发）

清除列表框并添加以“a”开头的名称，但不确定是否可以从客户端进行
或设置另一个可见的列表框，名称从原始列表框过滤并隐藏原始列表框，我无法从 js 或代码隐藏设置可见属性
不，我不想使用 ajax 自动填充

除了以上两种，还有更好的选择吗...

【问题讨论】：

您可能需要在东输入三个字符才能从数据库中获取与“开头为”表达式匹配的项目列表。
感谢您的回复...是的，您是绝对正确的，即使我想到了，但由于我已经有记录，即在列表框中，我是否需要再次往返用于过滤我已经拥有的记录的数据库...
或者有没有办法从 java 脚本中访问数据集，它完全获取，使用它我可以从 java 脚本中过滤数据..任何想法的家伙....

标签： asp.net

【解决方案1】：

这种过滤和重置最好在客户端本身完成。这样您就不会进行不必要的服务器调用。这是jQuery中的扩展方法。

$(function() {
  $('#select').filterByText($('#textbox'), true);
});

扩展方法：

jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
  return this.each(function() {
    var select = this;
    var options = [];
    $(select).find('option').each(function() {
      options.push({value: $(this).val(), text: $(this).text()});
    });
    $(select).data('options', options);
    $(textbox).bind('change keyup', function() {
      var options = $(select).empty().scrollTop(0).data('options');
      var search = $.trim($(this).val());
      var regex = new RegExp(search,'gi');

      $.each(options, function(i) {
        var option = options[i];
        if(option.text.match(regex) !== null) {
          $(select).append(
             $('<option>').text(option.text).val(option.value)
          );
        }
      });
      if (selectSingleMatch === true && 
          $(select).children().length === 1) {
        $(select).children().get(0).selected = true;
      }
    });
  });
};

我在 Lessan Vaezi 的博客上发现了这一点，并通过 live demo 了解如何操作。

【讨论】：

谢谢老兄，会试一试；）