select2 应用

首页在页面引用以下文件
<!--css-->
<link href="~/Scripts/select2/r_select2_metro.css" rel="stylesheet" />

<!--下拉检索-->
<script src="~/Scripts/select2/select2.min.js"></script>
<script src="~/Scripts/select2/select2_locale_zh-CN.js"></script>

页面代码：
<input type="hidden" id="txtAreaName" name="txtAreaName" class="span12 select2"/>
<input type="hidden" id="hidAreaID" name="hidAreaID"/>
<input type="hidden" id="hidAreaName" name="hidAreaName" value="广州"/>


JS：
//#region select 插件

  $('#txtAreaName').select2({
    //placeholder: "请输入产品型号",//文本框的提示信息
    minimumInputLength: 1,//至少输入n个字符，才去加载数据
    multiple: false,//允许单选还是多选
    //tags: "true",
    //tokenSeparators: [',', ' '],
    initSelection: function (element, callback) {   // 初始化时设置默认值
      var id = $(element).val();
      if (id !== "") {
         //Get_AreaList是一个模糊查询的方法，返回一个实体，这里记住哦，实体的两个字段必须是id和text，不可以自定义的
        $.ajax("/Web/Member/Get_AreaList", {
          data: {
            q: id
          },
          dataType: "json"
        }).done(function (data) {
          callback(data);
        });
      }
    },
    formatSelection: function (d) { return d.text; },  // 选择结果中的显示
    escapeMarkup: function (markup) { return markup; },
    formatResult: function (d) { return "<span>" + d.text + '</span>'; },  // 搜索列表中的显示
    ajax: {
      url: "/Web/Member/Get_AreaList",              // 异步请求地址
      dataType: "json",                  // 数据类型
      delay: 250,
      data: function (term, page) {  // 请求参数（GET）
        //keyword = term;
        return { q: term, page: page };
      },
      results: function (data, page) {
        //console.log(data);
        if (data.Result) {
          var tmp = [];
          var o = data.Result;
          for (var i = 0; i < o.length; i++) {
            tmp.push({ id: o[i].id, text: o[i].text });
          }
          //if (tmp.length == 0) {
          //  tmp.push({ id: keyword, text: "手动录入" });
          //}
          return {
            results: tmp
          };
        }
        else {
          results: ""
        }

      },
    }
  });

  //当检索框值改变时，同时赋值给页面上的隐藏控件，方便后续做提交/修改操作
  $("#txtAreaName").on('change', function (data) {

    $("#txtAreaName").val(data.added.text);
    $("#hidAreaID").val(data.added.id);
   // alert(data.added.id + '。' + data.added.text);


  });

  //给input 方式给select2赋值
  if ($("#hidAreaName").val()) {
    var $select = $("#txtAreaName").data("select2");
    var svalue = $("#hidAreaName").val();
    $select.data({ id: "1", text: svalue });

    $("#txtAreaName").val($("#hidAreaName").val());

  }

  

  //#endregion

以上到这里就完成啦，可以在输入框里面输入查询的字符，下拉框会模糊查询出对应的数据

以下是select2插件包的下载链接：
http://download.youkuaiyun.com/detail/ml01010736/9272727
select方式给下拉框赋默认值：$("#txtAreaName").select2("val",$("#hidAreaName").val());