用struts2 标签和Jquery 插件实现动态值,自动检索填充中值

  用到了这俩个jquery     <link rel="stylesheet" type="text/css" href="jquery/autocomplete/css/jquery.autocomplete.css">

                                          <script src="jquery/autocomplete/js/jquery.autocomplete.js"></script>

在 Hiredmyway 项目中一个页面WebRoot\org\jobpost\jobpost.jsp

http://pic002.cnblogs.com/img/only1/201004/2010041510034854.jpg 效果类似

类似下拉框,也可以实现手输入时自动检索补全,也可以修改值

<s:action name="getAllCompanyInfo"></s:action>
    <link rel="stylesheet" type="text/css" href="jquery/autocomplete/css/jquery.autocomplete.css">
    <script src="jquery/autocomplete/js/jquery.autocomplete.js"></script>
<script type="text/javascript">
    //autoComplete
    $(
        function(){

//通过把所有的值都检索出来放在数组里
            $.post("initOccupationAction.action",function(data){
                var arr = new Array();
                var len = data.length;
                for(var i = 0;i < len;i++){
                    arr[i] = data[i].codeDesc;
                }
                $("#emp_job_post_form [name='job.jobPostTitle']").autocomplete(arr);
                if($("#search_occupation").length>0)
                    $("#search_occupation").autocomplete(arr);
            });
        }
    )

    var websites = [
    "Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
    "Taobao", "Tom", "Yahoo","TOmcat","Title123", "JavaEye", "Csdn", "Alipay", "Alipay1213414"];
    $().ready(function() {
        $("#website").autocomplete(websites,{
            // Add a property can not be edited
        minChars: 0,
        max: 5,
        autoFill: true,
        mustMatch: true,
        matchContains: true,
        scrollHeight: 120,
        scroll:true,
        readonly:false,
        formatItem: function(data, i, total) {
            return "<I>"+data[0]+"</I>";
        },
        formatMatch: function(data, i, total) {
            return data[0];
        },
        formatResult: function(data) {
            return data[0];
        }
        }).result(function(e,data,value,sec){
            alert("11111");

      // 把选中的值放到div 里
            //$("#alows").attr("temps",data[0]);

// 把选中的值放到div 里
            $("#alows").html(data[0]);
        });
    });
   
        $(function() {

        setsampletext("orgNameId","input_orgName_default");
    })
    
function setsampletext(input_id, sample_id) {
    var phone = $("#"+input_id).val();
    if (phone.length > 0) {
        $("#"+sample_id).hide();
    }else{
        $("#"+sample_id).show();
    }
        
    $("#"+input_id).focus(function() {
        $("#"+sample_id).hide();
    });

    $("#"+input_id).blur(function() {
        var inputs = $("#"+input_id).val();
        if (inputs == null || inputs.length == 0) {
            $("#"+sample_id).show();
        } else {
            $("#"+sample_id).hide();
        }
    });

    $("#"+sample_id).click(function() {
        $("#"+sample_id).hide();
        $("#"+input_id).focus();
    })
}


function onChangeAction(orgNameId){
   var orgNameId = $("#search_by_org option:selected").val();
    window.location.href = "viewCompanyProfile.action?orgId="+orgNameId;
 }
</script>

<div>
    <img src="crain/images/title_search.png" />
</div>
<div class="search_title">
    Start your search for a job here!
</div>
<div class="search_btn1">
<!--  
    <select name="orgName" id="search_by_org" class="select_style"
        οnchange="onChangeAction();"></select>
-->
     <select class="select_style" name="orgName">
        <option value="">--please11 select</option>
        <s:iterator value="%{#request.LIST}" var="temp" >
            <option value="<s:property value="%{#temp.value}"/>" >
                <s:property value="dispayName" />
            </option>
        </s:iterator>
        
      </select>
      <s:textfield name="job.jobPostTitle" id="search_occupation" cssClass="insearch1" />
      <span class="error" id="search_occupation_error"></span>

      <div><input type="text" id="website" /></div>
                        <div class="input" >
                            <s:textfield name="org.orgName" id="orgNameId" maxlength="50" />
                            <span class="input_sample" style="margin-left: -300px;"  id="input_orgName_default">enter company name you are recruiting for.</span>
                        </div>

       // 把选择的值放到div id="alows"
                        <div id="alows" class="temps"></div>
</div>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值