如何使用 Select 2 和 Json 显示大数据集

Question

我在使用 select2 显示下拉列表中的数据时遇到问题。我认为原因是查询返回了很多行。当我将 Row 的数量限制为 50 （其中 Rownum

查看

<link href="~/Content/css/select2.min.css" rel="stylesheet" />
<div class="jumbotron">
<input type="hidden" id="textBoxVal" />
<select class="mySelect2" style="width:500px;">
</select>
</div>
 <script>
    $(document).ready(function () {
    $(".mySelect2").select2({
        placeholder: "Select category",
        allowClear: true,
        theme: "classic",
        ajax: {
            url: "/Home/GetCategory",
            dataType: 'json',
            delay: 10000,
            data: function (params) {
                return {
                    searchTerm: params.term
                };
            },
            processResults: function (data, params) {
                return {
                    results: data
                };
            }
        }
    });
   });
  $(".mySelect2").on("change", function () {
    var catId = $(this).val();
    $("#textBoxVal").val(catId);

    var textBoxValueData = $("#textBoxVal").val();
    $.ajax({
        url: '/Home/Save?data=' + textBoxValueData,
        dataType: 'json',
        type: 'post',
    });
});

型号

public class Select2Model
{
    public string id { get; set; }
    public string text { get; set; }
}

C#

 public JsonResult GetCategory(string searchTerm)
    {
        var list = new List<Select2Model>();
        using (OracleConnection conn = new OracleConnection(WebConfigurationManager.ConnectionStrings["PatientRecord"].ConnectionString))
        {
            conn.Open();
            OracleCommand cmd = new OracleCommand();
            cmd.Connection = conn;
            cmd.CommandText = @"SELECT PATIENT, NAMEFORWARD  FROM PATIENTDEMO ";
            cmd.CommandType = CommandType.Text;
            OracleDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                list.Add(new Select2Model()
                {
                    text = rdr["NAMEFORWARD"].ToString(),
                    id = rdr["Patient"].ToString()
                });
            }
            var dataList = list.ToList();
            if (searchTerm != null)
            {
               dataList = list.Where(x => x.text.Contains(searchTerm)).ToList();
            }
            var modifiedData = dataList.Select(x => new {
                id = x.id,
                text = x.text
            });
            return Json(modifiedData, JsonRequestBehavior.AllowGet);
        }
    }
    public JsonResult Save(string data)
    {
        return Json(0, JsonRequestBehavior.AllowGet);
    }

Answer 1

下拉列表中的 600000 行不是用户友好的。相反，您为什么不实现具有自动完成功能的下拉列表？

查看本页底部的示例：https://api.jqueryui.com/autocomplete/

更新： 在您的情况下，您的来源将是对服务器端的 ajax 调用以提取相关数据。像这样：

$('#myautocomplete').autocomplete({
            type: "POST",
            minLength: 3,
            source : function (request, response) 
            {                         
                var source_url = "../handlers/MyLookup.ashx?someparameter=" + $("#someparameter").val();

                $.ajax({
                    url: source_url,
                    dataType: "json",
                    data: request,
                    success: function (data) { response(data); },
                    error : function (a,b,c) { HandleLookUpError(a); }
                    });
            },                
            select: function (event, ui) { $('#result').val(ui.item.id); }               
        });

注意上面代码中的source_url 变量和ajax 调用。 关于如何从服务器端加载数据的更多细节在这里：https://stackoverflow.com/a/8873641/218408