<body>
<input type="text" name="business" id="business" class="makeinp" placeholder="请选择或输入" οnfοcus="setfocus(this)" οninput="setinput(this);" />
<select name="makeupCoSe" id="typenum" οnchange="changeF(this)" size="10" ></select>
</body>
<script>
window.opts = null;
var TempArr=[];//存储option
$(function(){
/*先将数据存入数组*/
$.ajax({
xhrFields:{
withCredentials:true
},
type:'GET',
url:address + "/user/getUser",
contentType: 'application/json;charset=utf-8',
async:false,
dataType:'json',
success:function(data){
$('#typenum').html('')
for(var i = 0; i<data.length;i++){
var opt = $('<option></option>').html('<span>'+data[i].companyName+'</span>')
$('#typenum').append(opt)
}
opts = $('#typenum>option').clone();
}
});
$(document).bind('click', function(e) {
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循环判断至跟节点,防止点击的是div子元素
if (elem.id && (elem.id == 'typenum' || elem.id == "business")) {
return;
}
elem = elem.parentNode;
}
$('#typenum').css('display', 'none'); //点击的不是div或其子元素
});
})
function changeF(this_) {
$(this_).prev("input").val($(this_).find("option:selected").text());
$("#typenum").css({"display":"none"});
}
function setfocus(this_){
$("#typenum").css({"display":""});
var select = $("#typenum");
for(i=0;i<TempArr.length;i++){
var option = $("<option></option>").text(TempArr[i]);
select.append(option);
}
}
function setinput(_this){
if(_this.value==''){
$('#typenum').html('').append(opts)
return
}
var ret = opts.find('span:contains("'+_this.value+'")').parent()
$('#typenum').html('').append(ret)
}
</script>