百度搜索下拉效果

最新推荐文章于 2020-12-01 14:59:38 发布

张祠

最新推荐文章于 2020-12-01 14:59:38 发布

阅读量1k

点赞数

分类专栏： web前端文章标签：下拉框搜索

本文链接：https://blog.csdn.net/zhanghong0603/article/details/51851413

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需用到上篇“java中ajax使用–传回一个对象列表“。
在上篇中已经通过ajax获得单位的对象列表，接下来介绍jsp页面。
1、jsp页面

<input type="text" name="organization.compName" id="compName" class="text" onkeyup="searchOrg();"  onkeydown="getOrgValue(selectedOrgIndex);">

2、js函数

/**
 *单位搜索（输入字符时异步查询单位列表）
 */
function searchOrg() 
{
//在上一篇中
}
/**
 * 回车获取单位的值
 */
function getOrgValue(selectedOrgIndex) 
{
    if (window.event.keyCode == 13 && $("#searchOrgDiv").css("display") != "none") 
    {
        var orgInfo = $("div span:nth-child(" + selectedOrgIndex + ")").val();
        var id = orgInfo.split(";")[0];
        var name = orgInfo.split(";")[1];
        var compCode = orgInfo.split(";")[2];
        var registerCode = orgInfo.split(";")[3];
        var legalPersion = orgInfo.split(";")[4];
        var logalPersionCard = orgInfo.split(";")[5];
        var compMail = orgInfo.split(";")[6];
        var orgTypeName = orgInfo.split(";")[7];
        var orgTypeId = orgInfo.split(";")[8];
        var RegionName = orgInfo.split(";")[9];
        var RegionId = orgInfo.split(";")[10];

        $("#compName").val(name);
        $("#orgId").val(id);
        $("#compCode").val(compCode);
        $("#registerCode").val(registerCode);
        $("#legalPersion").val(legalPersion);
        $("#logalPersionCard").val(logalPersionCard);
        $("#compMail").val(compMail);
        $("#orgTypeName").val(orgTypeName);
        $("#orgTypeId").val(orgTypeId);
        $("#RegionName").val(RegionName);
        $("#RegionId").val(RegionId);

        $("#searchOrgDiv").empty();
        $("#searchOrgDiv").css("display", "none");

    }
}
/**
 * 鼠标点击时获取单位信息
 * @param {Object} obj 当前对象
 */
function mouseClickToOrg(obj) {
    var orgInfo = $(obj).val();
    var id = orgInfo.split(";")[0];
    var name = orgInfo.split(";")[1];
    var compCode = orgInfo.split(";")[2];
    var registerCode = orgInfo.split(";")[3];
    var legalPersion = orgInfo.split(";")[4];
    var logalPersionCard = orgInfo.split(";")[5];
    var compMail = orgInfo.split(";")[6];
    var orgTypeName = orgInfo.split(";")[7];
    var orgTypeId = orgInfo.split(";")[8];
    var RegionName = orgInfo.split(";")[9];
    var RegionId = orgInfo.split(";")[10];

    $("#compName").val(name);
    $("#orgId").val(id);
    $("#compCode").val(compCode);
    $("#registerCode").val(registerCode);
    $("#legalPersion").val(legalPersion);
    $("#logalPersionCard").val(logalPersionCard);
    $("#compMail").val(compMail);
    $("#orgTypeName").val(orgTypeName);
    $("#RegionName").val(RegionName);
    $("#orgTypeName").val(orgTypeName);
    $("#orgTypeId").val(orgTypeId);
    $("#RegionName").val(RegionName);
    $("#RegionId").val(RegionId);

    $("#searchOrgDiv").empty();
    $("#searchOrgDiv").css("display", "none");
}