在asp.net中使用Listbox自动填充功能

时间:2013-01-03 03:05:48

标签: asp.net

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

  1. 现在我想要一个自动填充功能,如果用户输入类似'a'的所有以'a'名字开头的名字应该显示在列表框中
  2. 并在点击一些按钮后,应在列表框中重新填充原始数据
  3. 对于第二个,即重新填充希望我可以使用以下代码

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

    但是对于第一个我有一些iam工作的东西(当用户键入'a'或其他什么时,我正在使用文本框keyup事件)

    1. 清除列表框并添加以“a”开头的名称,但不确定是否可以从客户端
    2. 或设置另一个列表框,其中包含从原始文件中过滤的名称,并隐藏原始列表框,我无法从js或codebehind设置可见属性
    3. 不,我不想使用ajax autofill
    4. 除上述两个之外还有更好的选择......

1 个答案:

答案 0 :(得分:0)

此过滤和重置最好在客户端本身完成。这样你就不会进行不必要的服务器调用。这是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如何做到这一点。