input 配合 select 控件实现搜索功能

一 需求

select 控件实现从30万家医院中选择指定医院。如果单独使用 select 控件，会产生性能问题，会使得前端页面选择卡顿，服务器压力增加，因为需要查出30万条数据，因此需要其他控件配合使用。

方案一

采用省、市、区级联选择的方式选择出指定医院，采用该方案的缺点是： 如果不知道该医院所在的省市区，将无从选择。

方案二

使用一个 input 输入框，用来输入关键字，通过模糊查询，筛选出少量医院，从而完成医院选择。

二 核心代码

1 HTML部分

<div class="form-group pull-left" style="margin-left:15px;margin-top: 10px;">
    <input type="text" class="form-control input-sm" style="width:100px"
           id="objectKey" name="objectKey" placeholder="搜索条件">
</div>

<div class="form-group pull-left" style="margin-left:15px;margin-top: 10px;">
    <select id="visitDataId" name="visitDataId" style="width:130px">
        <option value="">请输入搜索条件</option>
    </select>
</div>

2 JS部分

实现 visitDataId 单击事件和 objectKey 的失去焦点事件

$("#visitDataId").click(function (e) {
    if (isEmpty($('#objectKey').val())) {
        alert("请输入搜索条件")
        return;
    } else {
        loadObjct();
    }
});


$("#objectKey").blur(function (e) {
    if (isEmpty($('#objectKey').val())) {
        alert("请输入搜索条件")
        return;
    } else {
        loadObjct();
    }
});

加载医院对象到 visitDataId 中

// 加载对象
function loadObjct() {
    loadServiceObj('visitDataId', curYpdRows.indexCode, curYpdRows.area);
}

// 加载医院对象
function loadServiceObj(id, indexCode, area, value) {
    var url;
    if (isEmpty($('#objectKey').val())) {
        url = 'oms/hospital/list?province=' + area + '&checkState=1';
    } else {
        url = 'oms/hospital/list?province=' + area + '&checkState=1&name_like=%25' + $('#objectKey').val() + '%25';
    }

    $.ajax({
        type: "get", // 请求方式
        url: url, // 发送请求地址
        dataType: "json",
        error: function () {
            myAlert("温馨提示", "连接服务器超时，请稍后重试...");
        },
        success: function (result) {
            if (result.total > 0) {
                $("#" + id).html("");
                $("#" + id).append("<option value=''>请选择服务对象</option>");
            } else {
                $("#" + id).html("");
                $("#" + id).append("<option value=''>请输入搜索条件</option>");
            }
            sortChinese(result.rows, 'name');
            for (var i = 0; i < result.total; i++) {
                // 加载父节点数据到新增页面
                $("#" + id).append("<option " + (value == result.rows[i].id ? "selected" : "") + " value='" + result.rows[i].id + "'>" + result.rows[i].name + "</option>");
            }
            $('#' + id).select2({
                language: "zh-CN",
                width: '200px'
            });
        }
    });
}

关闭窗口时，调用下面函数，清空相关控件数据

// 清除数据
function clearData() {
    $("#visitDataId").html("");
    $("#visitDataId").select2("val", "");
    $("#visitDataId").append("<option value=''>请输入搜索条件</option>");
    $('#objectKey').val("")
}

三 测试效果

1 进入页面效果

2 input 不输入，失去焦点，弹出对话框

3 input 不输入，单击 select 控件，弹出会话框 

4 关键字输入 协和，失去焦点后，发送Ajax请求到后台，在 select 中填充数据

5 select 控件选择满足条件的医院 北京协和医院，完成需求