jquery autocomplete combobox, совместимый с jquery ui 1.8.20

Question

Мне нужно было создать виджет для создания нормального окна выбора с помощью поиска и автозаполнения. Я сразу же пришел к this example .. и посмотрел.

С последним JQuery UI, он отлично работает, но я строго необходимо использовать версию 1.8.20 из JQuery UI.

Теперь я вижу, что число this._on @линии: 62, используемое в коде пользовательского виджета не доступно в jquery.ui.widget.js версии 1.8.20.

Как сделать функцию combobox более старой версией?

Answer 1

Вот как вы можете адаптировать виджет для jQuery 1.8.20. Я использую 1.8.18 в jsFiddle.

(function ($) { 
    $.widget("custom.combobox", { 
     _create: function() { 
      this.wrapper = $("<span>") 
       .addClass("custom-combobox") 
       .insertAfter(this.element); 

      this.element.hide(); 
      this._createAutocomplete(); 
      this._createShowAllButton(); 
     }, 

     _createAutocomplete: function() { 
      var selected = this.element.children(":selected"), 
       value = selected.val() ? selected.text() : ""; 

      this.input = $("<input>") 
       .appendTo(this.wrapper) 
       .val(value) 
       .attr("title", "") 
       .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
       .autocomplete({ 
       delay: 0, 
       minLength: 0, 
       source: $.proxy(this, "_source") 
      }) 
      /* plugin not present 
      .tooltip({ 
       tooltipClass: "ui-state-highlight" 
      })*/ 
; 

      this.input.bind('autocompleteselect', function (event, ui) { 
       ui.item.option.selected = true; 
       $(this).trigger("select", event, { 
        item: ui.item.option 
       }); 
      }); 

      this.input.bind('autocompletechange', function (event, ui) { 

       // Selected an item, nothing to do 
       if (ui.item) { 
        return; 
       } 

       // Search for a match (case-insensitive) 
       var value = this.input.val(), 
        valueLowerCase = value.toLowerCase(), 
        valid = false; 
       this.element.children("option").each(function() { 
        if ($(this).text().toLowerCase() === valueLowerCase) { 
         this.selected = valid = true; 
         return false; 
        } 
       }); 

       // Found a match, nothing to do 
       if (valid) { 
        return; 
       } 

       // Remove invalid value 
       this.input.val("") 
        .attr("title", value + " didn't match any item") 
       /*.tooltip("open")*/; 
       this.element.val(""); 
       this._delay(function() { 
        this.input /*.tooltip("close")*/ 
        .attr("title", ""); 
       }, 2500); 
       this.input.data("ui-autocomplete").term = ""; 
      }); 

      /* using delegate instead 
      this._on(this.input, { 
       autocompleteselect: function(event, ui) { 
       ui.item.option.selected = true; 
       this._trigger("select", event, { 
        item: ui.item.option 
       }); 
       }, 

       autocompletechange: "_removeIfInvalid" 
      });*/ 
     }, 

     _createShowAllButton: function() { 
      var input = this.input, 
       wasOpen = false; 

      $("<a>") 
       .attr("tabIndex", -1) 
       .attr("title", "Show All Items") 
      //.tooltip() 
      .appendTo(this.wrapper) 
       .button({ 
       icons: { 
        primary: "ui-icon-triangle-1-s" 
       }, 
       text: false 
      }) 
       .removeClass("ui-corner-all") 
       .addClass("custom-combobox-toggle ui-corner-right") 
       .mousedown(function() { 
       wasOpen = input.autocomplete("widget").is(":visible"); 
      }) 
       .click(function() { 
       input.focus(); 

       // Close if already visible 
       if (wasOpen) { 
        return; 
       } 

       // Pass empty string as value to search for, displaying all results 
       input.autocomplete("search", ""); 
      }); 
     }, 

     _source: function (request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
      response(this.element.children("option").map(function() { 
       var text = $(this).text(); 
       if (this.value && (!request.term || matcher.test(text))) return { 
        label: text, 
        value: text, 
        option: this 
       }; 
      })); 
     }, 

     _destroy: function() { 
      this.wrapper.remove(); 
      this.element.show(); 
     } 
    }); 
})(jQuery); 

$(function() { 
    $("#combobox").combobox(); 
    $("#toggle").click(function() { 
     $("#combobox").toggle(); 
    }); 
}); 

Answer 2

Здесь находится custom.combox, который работает в iPad и не отображает клавиатуру iPad при отображении всех элементов в поле со списком. Для моих целей я желал «редактируемое раскрывающееся меню». Большая точка с моим ответом - остановить клавиатуру iPad от отображения, увидеть мои комментарии на iPad-хаке.

(function($) { 
      $.widget("custom.combobox", { 
       _create: function() { 
        this.wrapper = $("<span>") 
         .addClass("custom-combobox") 
         .insertAfter(this.element); 

        this.element.hide(); 
        this._createAutocomplete(); 
        this._createShowAllButton(); 
       }, 

       _createAutocomplete: function() { 
        var selected = this.element.children(":selected"), 
         value = selected.val(); 

        this.input = $("<input>") 
         .appendTo(this.wrapper) 
         .val(value) 
         .attr("title", "") 
         .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
         .autocomplete({ 
          delay: 0, 
          minLength: 0, 
          source: $.proxy(this, "_source") 
         }); 
        //.tooltip({don't display tooltip in ipad, clunky 
        // tooltipClass: "ui-state-highlight" 
        //}); 

        this.input.bind('autocompleteselect', function(event, ui) { 
         if ((/iPhone|iPod|iPad/).test(navigator.userAgent)) { 
          var $input = $(this); 
          setTimeout(function() { 
           $input.removeAttr('readonly'); //release readonly lock on input-end ipad hack 
          }, 2000); 
         } 

         ui.item.option.selected = true; 
         $(this).trigger("select", event, { 
          item: ui.item.option 
         }); 
        }); 

         this.input.bind('autocompletechange', function (event, ui) { 

        // Selected an item, nothing to do 
        if (ui.item) { 
         return; 
        } 

        // Search for a match (case-insensitive) 
        var value = this.input.val(), 
         valueLowerCase = value.toLowerCase(), 
         valid = false; 
        this.element.children("option").each(function() { 
         if ($(this).text().toLowerCase() === valueLowerCase) { 
          this.selected = valid = true; 
          return false; 
         } 
        }); 

        // Found a match, nothing to do 
        if (valid) { 
         return; 
        } 

        // Remove invalid value 
        this.input.val("") 
         .attr("title", value + " didn't match any item") 
        /*.tooltip("open")*/; 
        this.element.val(""); 
        this._delay(function() { 
         this.input /*.tooltip("close")*/ 
         .attr("title", ""); 
        }, 2500); 
        this.input.data("ui-autocomplete").term = ""; 
       }); 

        //this._on(this.input, { 
        // autocompleteselect: function(event, ui) { 
        //  var $option = $(ui.item.option); 
        //  //var optionType = $option.data('type'); 

        //  ui.item.option.selected = true; 
        //  this._trigger("select", event, { 
        //   item: ui.item.option 
        //  }); 

        //  //old way of updating Code description and comment, now using KO 
        //  //if (optionType) { 
        //  // if (optionType === 'option-type-code') { 
        //  //  var prelimId = $option.parents('.options-row').data('id'); 
        //  //  var descriptionRow = $('#optionsContainer').find('.options-description-row[data-id="' + prelimId + '"]'); 
        //  //  var description = $option.data('description'); 
        //  //  var comment = $option.data('comment'); 
        //  //  descriptionRow.find('input[data-type="option-description-input"]').val(description); 
        //  //  descriptionRow.find('input[data-type="option-comment-input"]').val(comment); 

        //  // } 
        //  //} 
        // }, 

        // //autocompletechange: "_removeIfInvalid" 
        //}); 
       }, 

       _createShowAllButton: function() { 
        var input = this.input, 
         wasOpen = false; 

        $("<a>") 
         .attr("tabIndex", -1) 
         .attr("title", "Show All Items") 
         //.tooltip() //don't display tooltip in ipad, clunky 
         .appendTo(this.wrapper) 
         .button({ 
          icons: { 
           primary: "ui-icon-triangle-1-s" 
          }, 
          text: false 
         }) 
         .removeClass("ui-corner-all") 
         .addClass("custom-combobox-toggle ui-corner-right") 
         .mousedown(function() { 
          wasOpen = input.autocomplete("widget").is(":visible"); 
         }) 
         .click(function() { 
          if ((/iPhone|iPod|iPad/).test(navigator.userAgent)) { 
           $(input).attr('readonly', 'readonly'); //begin ipad hack to stop keyboard from displaying on combobox select 
          } else { 
           input.focus(); 
          } 

          // Close if already visible 
          if (wasOpen) { 
           return; 
          } 

          // Pass empty string as value to search for, displaying all results 
          input.autocomplete("search", ""); 
         }); 
       }, 

       _source: function(request, response) { 
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
        response(this.element.children("option").map(function() { 
         var text = $(this).text(); 
         var value = $(this).val(); 
         if (this.value && (!request.term || matcher.test(text))) 
          return { 
           label: text, 
           value: value, 
           option: this 
          }; 
        })); 
       }, 

       _removeIfInvalid: function(event, ui) { 

        // Selected an item, nothing to do 
        if (ui.item) { 
         return; 
        } 

        // Search for a match (case-insensitive) 
        var value = this.input.val(), 
         valueLowerCase = value.toLowerCase(), 
         valid = false; 
        this.element.children("option").each(function() { 
         if ($(this).text().toLowerCase() === valueLowerCase) { 
          this.selected = valid = true; 
          return false; 
         } 
        }); 

        // Found a match, nothing to do 
        if (valid) { 
         return; 
        } 

        // Remove invalid value 
        this.input 
         .val("") 
         .attr("title", value + " didn't match any item") 
         .tooltip("open"); 
        this.element.val(""); 
        this._delay(function() { 
         this.input.tooltip("close").attr("title", ""); 
        }, 2500); 
        this.input.data("ui-autocomplete").term = ""; 
       }, 

       _destroy: function() { 
        this.wrapper.remove(); 
        this.element.show(); 
       } 
      }); 
     })(jQuery);