//css部分
jquery.splendid.textchange.js可以自己去下载
.searchSelectDiv {
margin: 0 50px 0 0;
height: 24px;
line-height: 24px;
width: 118px;
}
.searchSelect {
position: relative;
}
.searchSelect select {
width: auto;
font-size: 12px;
color: #464c5b;
outline: none;
padding: 2px 4px;
border: 1px solid #d7dde4;
position: absolute;
z-index: 22;
}
.searchSelect .search {
width:100%;
border-radius: 3px;
outline: none;
padding: 0 36px 0 4px;
line-height: 24px;
font-size: 12px;
color: #464c5b;
height: 24px;
border: 1px solid #d7dde4;
}
.opt {
background-color: #FFF;
}
.opt:hover {
background-color: #3399ff;
color: #FFF;
}
.searchSelect .arrowDown {
position: absolute;
right: 6px;
top: 6px;
border: 0;
width: 14px;
height: 24px;
display: inline-block;
text-align: center;
background: url('images/arrow.png') -12px -62px no-repeat;
}
//组件部分
<div class="searchSelectDiv lf"
style="display: inline-block; margin-top: 3px; width: 220px;">
<span id="conid" class="searchSelect"> <input type="text"
class="search" /> <b class="arrowDown"
style="cursor: pointer; top: 4px;"></b> <select
style="display: none;">
<logic:notEmpty name="conList">
<logic:iterate id="con" name="conList">
<option value="${con.conid }"
<logic:equal name="con" property="conid" value="${form.conid }">selected</logic:equal>>
${con.conname }
</option>
</logic:iterate>
</logic:notEmpty>
</select> </span>
</div>
//js部分
/**
* Created by ZhangML on 2017/8/3.
*/
/*IE8不支持Input>placeholder占位符,会触发Input change事件, 必须引用jquery.splendid.textchange.js文件*/
var SelectOptionAry = [];
var SelectIndex = 0;
// 存储option
function initSearchSelectChg(id, value, ph, chg) {
initSearchSelect(id, value, ph);
$("#" + id).children("select").bind("change", function() {
searchSelectChg(this);
chg();
});
$("#" + id).children("select").bind("click", function() {
searchSelectChg(this);
chg();
});
}
function initSearchSelect(id, value, ph) {
$("#" + id).append('<input type="hidden" class="value" name="' + id + '" value="' + value + '"/>');
$("#" + id).append('<input type="hidden" class="index" value=""/>');
/* 先将数据存入数组 */
var OptAry = new Array();
$("#" + id).children(".index").val(SelectIndex);
SelectOptionAry[SelectIndex] = OptAry;
SelectIndex++;
$("#" + id + " option").each(function(index, el) {
var TmpAry = new Array();
TmpAry[0] = $.trim($(this).text());
TmpAry[1] = $.trim($(this).val());
OptAry[index] = TmpAry;
});
$("#" + id).children(".search").val(getTextByValue(id, value));
$("#" + id).children(".search").on("textchange", function() {
searchInput(this);
});
$("#" + id).children(".search").prop({
"placeholder" : ph
});
$("#" + id).children(".arrowDown").bind("click", function() {
downBtnClick(this);
});
$("#" + id).children("select").bind("change", function() {
searchSelectChg(this);
});
$("#" + id).children("select").bind("click", function() {
searchSelectChg(this);
});
$("#" + id).children("select").bind("blur", function() {
hideSearchSelect(this);
});
}
function searchSelectChg(this_) {
$(this_).parent(".searchSelect").children(".search").val($(this_).find("option:selected").text());
$(this_).parent(".searchSelect").children(".value").val($(this_).find("option:selected").val());
hideSearchSelect(this_);
}
function searchInput(this_) {
var select = $(this_).parent(".searchSelect").children("select");
select.html("");
var index = $(this_).parent(".searchSelect").children(".index").val();
for (var i = 0; i < SelectOptionAry[index].length; i++) {
if (SelectOptionAry[index][i][0].indexOf(this_.value) >= 0 || this_.value == '') {
var option = $("<option class='opt'></option>").text(SelectOptionAry[index][i][0])
.val(SelectOptionAry[index][i][1]);
select.append(option);
}
}
select.value = '';
$(this_).parent(".searchSelect").children(".value").val('');
if (this_.value != '')
showSearchSelect(select);
else
hideSearchSelect(select);
}
function downBtnClick(this_) {
var val = $(this_).parent(".searchSelect").children(".value").val();
var select = $(this_).parent(".searchSelect").children("select");
select.html("");
var index = $(this_).parent(".searchSelect").children(".index").val();
for (var i = 0; i < SelectOptionAry[index].length; i++) {
if (val == SelectOptionAry[index][i][1])
select.append("<option value='" + SelectOptionAry[index][i][1] + "' selected='selected'>"
+ SelectOptionAry[index][i][0] + "</option>");
else
select.append("<option value='" + SelectOptionAry[index][i][1] + "'>" + SelectOptionAry[index][i][0]
+ "</option>");
}
focusSearchSelect(select);
}
function showSearchSelect(select) {
var wd = $(select).parent(".searchSelect").children(".search").width();
if ($(select).width() < wd + 50)
select.css({
"width" : wd + 50
});
select.css({
"display" : "block"
});
if ($(select).children("option").size() > 10)
$(select).prop("size", 10);
else
$(select).prop("size", $(select).children("option").size());
}
function focusSearchSelect(select) {
showSearchSelect(select);
select.focus();
}
function hideSearchSelect(this_) {
$(this_).css({
"display" : "none"
});
}
function getTextByValue(id, value) {
var index = $("#" + id).children(".index").val();
for (var i = 0; i < SelectOptionAry[index].length; i++) {
if (SelectOptionAry[index][i][1] == value) {
return SelectOptionAry[index][i][0];
}
}
return '';
}
function getSearchSelectText(id) {
return getTextByValue(id, getSearchSelectVal(id));
}
function getSearchSelectVal(id) {
return $("#" + id).children(".value").val();
}
function setSearchSelectVal(id, value) {
$("#" + id).children(".value").val(value);
$("#" + id).children(".search").val(getTextByValue(id, value));
}