Problème lors de l'utilisation de jquery ui combobox

J'ai un combobox jquery. Lorsque l'utilisateur sélectionne un produit, il redirige l'utilisateur vers la page d'informations sur le produit. Malheureusement, cela ne fonctionne pas comme prévu. J'ai utilisé une sélection normale cela fonctionne très bien.Problème lors de l'utilisation de jquery ui combobox

(function($) { 
    $.widget("ui.combobox", { 
     _create: function() { 
      var self = this, 
       select = this.element.hide(), 
       selected = select.children(":selected"), 
       value = selected.val() ? selected.text() : ""; 
      var input = $("<input>") 
       .insertAfter(select) 
       .val(value) 
       .autocomplete({ 
        delay: 0, 
        minLength: 0, 
        source: function(request, response) { 
         var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (this.value && (!request.term || matcher.test(text))) 
           return { 
            label: text.replace(
             new RegExp(
              "(?![^&;]+;)(?!<[^<>]*)(" + 
              $.ui.autocomplete.escapeRegex(request.term) + 
              ")(?![^<>]*>)(?![^&;]+;)", "gi" 
             ), "<strong>$1</strong>"), 
            value: text, 
            option: this 
           }; 
         })); 
        }, 
        select: function(event, ui) { 
         ui.item.option.selected = true; 
         self._trigger("selected", event, { 
          item: ui.item.option 
         }); 
        }, 
        change: function(event, ui) { 
         if (!ui.item) { 
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), 
           valid = false; 
          select.children("option").each(function() { 
           if (this.value.match(matcher)) { 
            this.selected = valid = true; 
            return false;                    
           } 
          }); 
          if (!valid) { 
           // remove invalid value, as it didn't match anything 
           $(this).val(""); 
           select.val(""); 
           return false; 
          } 
         } 
        } 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left"); 

      input.data("autocomplete")._renderItem = function(ul, item) { 
       return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      }; 

      $("<button>&nbsp;</button>") 
       .attr("tabIndex", -1) 
       .attr("title", "Show All Items") 
       .insertAfter(input) 
       .button({ 
        icons: { 
         primary: "ui-icon-triangle-1-s" 
        }, 
        text: false 
       }) 
       .removeClass("ui-corner-all") 
       .addClass("ui-corner-right ui-button-icon") 
       .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(); 
       }); 
     } 
    }); 
})(jQuery); 

$(function() { 
    $("#combobox").combobox(); 
}); 
</script>

J'ai utilisé l'événement de modification, cela ne fonctionne pas.

$(document).ready(function() { 
     $("#combobox").change(function() { 
      location.href = $(this).val(); 
     }); 
    });

J'apprécie n'importe quelle aide.

Source

2010-11-20 Josh R

-1

La réponse est assez simple. Cela a fonctionné pour moi.

$(".selector").autocomplete({ 
    select: function(event, ui) { ... } 
});

Source

2010-11-23 09:46:05

Insérer entre <head> et </head> tags:

<script type="text/javascript" src="js/jquery-ui-combobox.js"></script> 
<script type="text/javascript">   
    $('selector').combobox();  
    $('selector').change(function(){ ... }); 
</script>

code "jquery-ui-combobox.js":

$.widget("ui.combobox", { 
     _create: function() { 
      var self = this, 
       select = this.element.hide(), 
       selected = select.children(":selected"), 
       value = selected.val() ? selected.text() : ""; 
      var input = this.input = $("<input />") 
       .insertAfter(select) 
       .val(value) 
       .autocomplete({ 
        delay: 0, 
        minLength: 0, 
        source: function(request, response) { 
         var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (this.value && (!request.term || matcher.test(text))) 
           return { 
            label: text.replace(
             new RegExp(
        "(?![^&;]+;)(?!<[^<>]*)(" +$.ui.autocomplete.escapeRegex(request.term) +")(?![^<>]*>)(?![^&;]+;)", 
        "gi" 
       ), 
        "<strong>$1</strong>" 
       ), 
            value: text, 
            option: this 
           }; 
         })); 
        }, 
        select: function(event, ui) { 
         ui.item.option.selected = true; 
         self._trigger("selected", event, { 
          item: ui.item.option 
         }); 
      $(select).change(); //Change COMBOBOX 
     }, 
        change: function(event, ui) { 
         if (!ui.item) { 
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), valid = false; 
          select.children("option").each(function() { 
           if ($(this).text().match(matcher)) { 
            this.selected = valid = true; 
            return false; 
           } 
          }); 
          if (!valid) { 
           // remove invalid value, as it didn't match anything 
           $(this).val(""); 
           select.val(""); 
           input.data("autocomplete").term = ""; 
           return false; 
          } 
         } 
        } 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left") 
     .css('margin', '0') 
     .css('padding', '0.48em 0 0.47em 0.45em'); 

      input.data("autocomplete")._renderItem = function(ul, item) { 
       return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul) 
     .css('cursor', 'pointer'); 
      }; 

    this.button = $("<button>&nbsp;</button>") 
       .attr("tabIndex", -1) 
       .attr("title", "Show All Items") 
       .insertAfter(input) 
       .button({ 
        icons: { 
         primary: "ui-icon-triangle-1-s" 
        }, 
        text: false 
       }) 
       .removeClass("ui-corner-all") 
     .addClass("ui-corner-right ui-button-icon") 
     .css('margin-left','-1') 
     .css('padding','0.15em') 
       .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(); 

     $(select).click(); //Click COMBOBOX 
     }); 
     }, 

     destroy: function() { 
      this.input.remove(); 
      this.button.remove(); 
      this.element.show(); 
      $.Widget.prototype.destroy.call(this); 
     } 
    });

Source

2011-01-28 21:54:22

-1

Vous pouvez spécifier directement dans l'événement suivant comme:

select: function(event, ui) { 
    ui.item.option.selected = true; 
    location.href = select.val(); 
    self._trigger("selected", event, { 
     item: ui.item.option 
    }); 
}

Source

2012-08-07 13:49:45 PSR

Problème lors de l'utilisation de jquery ui combobox

Répondre

Questions connexes