2010-10-16 12 views
1

bonjour je veux utiliser Jquery UI AutoComplete Combobox dans mon application asp.net. Voici mon exemple Code:
Bind asp.net Server Side données à Combtox Html

Mon Combobox est un contrôle html. comment puis-je lier les données côté serveur? Ou est-il possible d'utiliser la boîte de saisie semi-automatique Jquery pour aspBO combobox? Sélectionnez un ... asp C++ c coldfusion groovy haskell java javascript perl php python rubis scala

JavaScript:

<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 (this.value && (!request.term || matcher.test(text))) return { 
          id: this.value, 
          label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), 
          value: text 
         }; 
        })); 
       }, 
       delay: 0, 
       change: function (event, ui) { 
        if (!ui.item) { 
         // remove invalid value, as it didn't match anything 
         $(this).val(""); 
         return false; 
        } 
        select.val(ui.item.id); 
        self._trigger("selected", event, { 
         item: select.find("[value='" + ui.item.id + "']") 
        }); 

       }, 
       minLength: 0 
      }).addClass("ui-widget ui-widget-content ui-corner-left"); 
      $("<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(); 
    $("#toggle").click(function() { 
     $("#combobox").toggle(); 
    }); 
}); 
</script> 
+0

Cher Avinash :) Merci. – Shahin

Répondre

1

Vous lieriez la source de données à l'élément select/dropdown, comme s'il n'y avait pas de zone de liste déroulante attachée. Et c'est comme ça que vous devriez commencer. Faites-le fonctionner sans que le combobx ne vous gêne. Une fois que vous avez obtenu les données et une liste déroulante simple, vous serez en mesure d'ajouter le code que vous avez ci-dessus et vous serez en or.