將asp.net服務器端數據綁定到Html Combobox

Question

您好，我想在我的asp.net應用程序中使用Jquery UI AutoComplete Combobox。 這裏是我的示例代碼：

My Combobox是一個html控件。 我如何將服務器端數據綁定到它？ 還是有可能使用jQuery自動完成框的asp.net組合框？ 選擇一個...... ASP Ç C++ 的ColdFusion 常規 哈斯克爾 的Java 的JavaScript perl的 PHP 蟒蛇 紅寶石 斯卡拉

的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> 

Answer 1

您會將數據源綁定到select/dropdown元素，就像沒有連接到它的組合框一樣。這就是你應該如何開始。讓它在沒有combobx妨礙的情況下工作。一旦你得到了數據呈現和一個普通的下拉列表，你就可以添加上面的代碼，並且你將會成爲黃金。