2010-02-03 74 views
0

我想要在编辑模式下的ultrawebgrid单元格中使用自动完成下拉控件,因此用户可以输入数据,并且如果存在数据,则自动填充值,不应允许使用无效数据。这可能吗?我不想使用webcombo,它太重了,我不需要多列下拉菜单。我想要一个简单的下拉列表,但用户输入的能力就像Google建议的一样,但所有值都缓存在客户端上,每次击键时都不会往返服务器。Infragistics ultrawebgrid单元格中的自动完成下拉列表

控制应该是以下一个

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx

感谢状,

RK

回答

0

我已经能够做到像你想要什么。这里是我所做的,但我不知道它是否适用于Infragistics包:

1-我下载了JQuery UI自动填充文本框 2-我修改了一点点在网站上给出的示例。 3-我申请了一些东西来修改我的下拉列表中有一个名为XYZ的类,用于自动完成。我使用了一个委托,因此当它在UI上生成一个下拉列表时,它会通过自动填充文本框自动替换它。

对不起,如果我的英语不完美,这不是我的第一语言。

这里的一些代码(注意:在示例中,我没有使用现场()或委托()函数):

(function($) { 
    $.widget("ui.autoCompleteDDL", { 
     _create: function() { 
      var self = this; 
      var select = this.element.hide(); 
      var _isHoverUl = false; 

      var input = $("<input>") 
       .addClass("ig_Edit igtxt_Edit") 
       .width(select.width()) 
       .addClass(select.attr("class")) 
       .removeClass("AutoComplete DropDownList") 
       .click(function(e){this.select(); }) 
       .insertAfter(select) 
       .autocomplete({ 
        source: function(request, response) { 
         var matcher = new RegExp(request.term, "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (!request.term || matcher.test(text)) 
           return { 
            id: $(this).val(), 
            label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), 
            value: text 
           }; 
         })); 
        }, 
        delay: 100, 
        select: function(e, ui) { 
         if (!ui.item) { 
          // remove invalid value, as it didn't match anything 
          $(this).val(""); 
          return false; 
         } 
         $(this).focus(); 
         select.val(ui.item.id); 

         self._trigger("selected", null, { 
          item: select.find("[value='" + ui.item.id + "']") 
         }); 

        }, 
        minLength: 1 
       }) 
       .blur(function(e){ 
         var curInput= $(this); 
         if (!_isHoverUl){ 
          setTimeout(function(){ 
           curInput.val(select.get(0).options[select.get(0).selectedIndex].text); 
           input.autocomplete("close"); 
          }, 150); // 150 is because of the autocomplete implementation. 
         } 
        }); 

      // Fix for the scrollbar in IE7/8 
      $("body") 
       .delegate(".ui-autocomplete", "mouseover", function(evt){ _isHoverUl = true;}) 
       .delegate(".ui-autocomplete", "mousemove", function(evt){input.focus();}) 
       .delegate(".ui-autocomplete", "mouseout", function(evt){_isHoverUl = false;}); 

      // Possibility of showing an arrow button. 
      $("<div>&nbsp;</div>") 
      .insertAfter(input) 
      .addClass("ui-icon-combo-arrow") 
      .mouseover(function(){$(this).toggleClass("ui-icon-combo-arrow ui-icon-combo-arrowH"); }) 
      .mouseout(function(){$(this).toggleClass("ui-icon-combo-arrow ui-icon-combo-arrowH"); }) 
      .removeClass("ui-corner-all") 
      .css({"display":"inline"}) 
      .position({ 
       my: "left center", 
       at: "right center", 
       of: input, 
       offset: "-1 0" 
      }) 
      .attr("title", "") 
      .click(function() { 
       // close if already visible 
       if (input.autocomplete("widget").is(":visible")) { 
        input.autocomplete("close"); 
        return; 
       } 
       // pass empty string as value to search for, displaying all results 
       input.autocomplete("search", ""); 
       input.focus(); 
      }); 

      input.val(select.get(0).options[select.get(0).selectedIndex].text); 
     } 
    }); 

})(jQuery); 

$(function() { 
    $("select.AutoComplete").autoCompleteDDL(); 
}); 

我希望这有助于