仿百度

页面：

 <input id="txtSchool" onkeyup="SetSchoolKeyUp('txtSchool', 'selSchool', 'hidSchool');" onfocus="SetSchoolFocus('txtSchool', 'selSchool', 'hidSchool');"  class="input2"/>
 <input id="hidSchool" type="hidden" value="" />
 <select id="selSchool" class ="pa left00" onclick="SetSchoolClick('txtSchool', 'selSchool', 'hidSchool');" multiple="multiple" style="display:none" >
 </select>

 

JS：

///textid:文本框id
///selectid：选择框id
///hideid ：隐藏域id

///实时刷新
function SetSchoolKeyUp(textId, selectId, hideId) {
    if ($("#" + textId).val() == "") {
        $("#" + hideId).val("");
        $("#" + selectId).css("display", "none");
    } else {
        GetSchool(selectId, $("#" + textId).val());
        $("#" + selectId).css("display", "block");
    }
}

///获取焦点
function SetSchoolFocus(textId, selectId, hideId) {
    if ($("#" + textId).val() == "") {
        $("#" + hideId).val("");
        $("#" + selectId).css("display", "none");
    } else {
        GetSchool(selectId, $("#" + textId).val());
        $("#" + selectId).css("display", "block");
    }
}

function SetSchoolClick(textId, selectId, hideId) {
    $("#" + textId).val($("#" + selectId).find("option:selected").text());
    $("#" + hideId).val($("#" + selectId).val());
    $("#" + selectId).css("display", "none");
}


function GetSchool(selectId, textValue) {
    $.ajax({
        type: "post",
        dataType: "json",
        contentType: "application/json",
        async: true,
        url: "/asmxs/SYS/School/School.asmx/GetSchools",
        data: '{"strWhere":"","schoolName":"' + textValue + '"}',
        success: function (e) {
            var lists = e.d;
            var select = $("#" + selectId);
            select.children().remove();
            for (var i = 0; i < lists.length; i++) {
                var mode = lists[i];
                select.append("<option value=" + mode.SchoolID + ">" + mode.SchoolName + "</option>");
            }
        },
        error: function (e, x) {
            alert("操作失败！");
        }
    });
}