autocomplete dropdown in Infragistics ultrawebgrid cell

Question

Я хочу, чтобы выпадающее меню автозаполнения в ячейке ultrawebgrid в режиме редактирования, поэтому пользователь может вводить данные, а значение заполняется автоматически, если существует, недопустимые данные не должны быть разрешены. Это возможно? Я не хочу использовать webcombo, он слишком тяжелый, и мне не нужно выпадающее меню с несколькими колонками. Мне нужен простой раскрывающийся список, но возможность для пользователя вводить текст так же, как Google, но все значения, кэшированные на клиенте, не обращаются к серверу при каждом нажатии клавиши.

контроль должен быть как следующие один

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

спасибо,

RK

Answer 1

Я был в состоянии сделать что-то вроде того, что вы хотите. Вот что я сделал, но я не знаю, работает ли он в пакете Infragistics:

1- Я загрузил текстовое поле автозаполнения пользовательского интерфейса JQuery 2- Я немного изменил образец, указанный на сайте. 3- Я применил что-то, чтобы изменить все выпадающее меню, имеющее класс XYZ для автоматического завершения. Я использовал делегат, поэтому, когда он генерирует раскрывающийся список в пользовательском интерфейсе, он автоматически заменяет его текстовым полем автозаполнения.

Извините, если мой английский не совершенен, это не мой первый язык.

вот некоторый код (Примечание: В образце я не использовал функцию живой() или делегат()):

(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(); 
}); 

Я надеюсь, что это помогло