Savez-vous pourquoi l'introduction de jquery ui autocomplete pour mes listes déroulantes est également en train de changer ma liste?

Question

Je suis en train de changer mes comboboxes d'autocomplétion donc j'effet de levier the code listed here (qui a parfaitement fonctionné pour mes menus déroulants)

Le problème est que je aussi sur la même page ont une liste avec le code suivant:

<%= Html.ListBox("Cars", Model.BodyParts.Select(
        x => new SelectListItem { 
         Text = x.Name, 
         Value = x.Id, 
         Selected = Model.CarsSelected.Any(y => y.Id == x.Id) 
        } 
       ))%> 

et il semble que le code jquery ui change à un menu déroulant autocomplete ainsi (par opposition à le garder comme une zone de liste de sélection multiple)

une idée pour éviter que cela se produise?

je suis littéralement juste en utilisant le code exact on this page

<script type="text/javascript"> 
(function($) { 
    $.widget("ui.combobox", { 
     _create: function() { 
      var self = this; 
      var select = this.element.hide(); 
      var input = $("<input>") 
       .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: 0, 
        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: 0 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left"); 
      $("<button>&nbsp;</button>") 
      .insertAfter(input) 
      .button({ 
       icons: { 
        primary: "ui-icon-triangle-1-s" 
       }, 
       text: false 
      }).removeClass("ui-corner-all") 
      .addClass("ui-corner-right ui-button-icon") 
      .position({ 
       my: "left center", 
       at: "right center", 
       of: input, 
       offset: "-1 0" 
      }).css("top", "") 
      .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() { 
    $("select").combobox(); 
}); 
</script> 

Answer 1

Je devine que votre sélecteur JQuery (non fourni dans votre question) est saisissant toutes les listes déroulantes sur la page. Vous devriez chercher à le rendre plus spécifique, en référençant très probablement l'élément par ID. Il y a beaucoup de bons exemples dans les docs JQuery:

http://api.jquery.com/category/selectors/