选择框可输入可搜索查询下拉选项框（自定义）

//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));
}