<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>