功能优化，
1、增加级联查询功能（注：依赖Jquery.js，附有源代码，可以当作插件直接使用）
2、加入上下键选择功能，回车键选择结果。（2017-08-30）
级联查询下拉框组调用代码：
bindCascadeAutoSelect("selectId1", true, function(re1) {
// re1 一级选项的值
$("#selectId2).attr("dftCon", re1);
bindCascadeAutoSelect("selectId2", true, function(re2) {
// re2 二级选项的值
$("#selectId3).attr("dftCon", re2);
bindCascadeAutoSelect("selectId3", true, function(re3) {
// re3 三级选项的值
});
});
});
普通查询下拉框调用代码：
bindAutoSelect("containerId", true, function() {});
效果如下：
JSP页面代码：
注意事项：
依赖 jquery
name="supplierCode" textName="supplierName" , supplierCode会绑定到一个input[hidden] 上对应的是选项的值，supplierName对应的是选项显示的文本。
url: 对应的值是下拉列表数据来源。 返回类型是 List<xxDto> xxDto包含code, name 两个属性，具体格式可以根据自己的需求稍作修改
dftVal: 默认选中项的值
dftCon: 级联查询时的上级选中的值做为当前下拉框的固定搜索参数，
/***
* 自动检索下拉框
*/
.autoSelect {
background: url("../images/select-icon.png") right no-repeat;
}
input[type=text]::-ms-clear {display:none;}
.autoSelectDiv,.cascadeAutoSelectDiv {
background-color: #FFFFFF;
position: absolute;
display: none;
max-height: 283px;
overflow: auto;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
z-index: 100;
}
.autoSelectDiv ul {
list-style:none;
padding: 0px;
margin-bottom: 0px;
max-height: 283px;
}
.autoSelectDiv ul li {
border:1px solid #CCCCCC;
border-top:none;
padding:6px;
cursor:pointer;
height: 28px;
}
.autoSelectDiv ul:first-child {
border-top:1px solid #CCCCCC;
}
.autoSelectDiv ul li:hover {
background-color: #ddd;
}
.autoSelectDiv .active {
background-color: #3276b1;
color: #ffffff;
}
var UP_DOWN_KEY = {
KEY_UP:"UP",
KEY_DOWN:"DOWN"
};
/***
* 自动补全下拉框
* (下拉框插件核心方法)
* 输入框设置：class="autoSelect" 普通下拉框
* 输入框设置：class="cascadeAutoSelect" 级联下拉框
* 可以设置的一些自定义属性：
* name="" 选中后的值对应的字段
* textName="" 选中后的显示文本的内容对应的字段
* dftVal="" 默认选中的值
* dftCon="" 默认的检索条件，如级联选择的时候上级选中的值做为它的默认检索条件，输入检索之外的条件
* url="" 下拉框数据来源
* 使用的时候 $("#containerId").autoSelect(function() {});
* 使用的时候 $("#containerId").autoSelect(function() {});
* @param $
*/
(function($){
$.fn.autoSelect = function(callback) {
$(this).find(".autoSelect").each(function(i, v) {
initAutoSelect(this, callback);
});
},
$.fn.cascadeAutoSelect = function(callback) {
initAutoSelect(this, callback);
}
})(jQuery);
/***
* 初始化AutoSelect
* @param inputAuto
* @return
*/
function initAutoSelect(inputAuto, callback) {
// 输入框
$(inputAuto).attr("autocomplete", "off");
var codeName = $(inputAuto).attr("name");
var textName = $(inputAuto).attr("textName");
$(inputAuto).removeAttr("name");
var inputHdCode = '<input type="hidden" class="hdCode" name="'+codeName+'" />';
var inputHdName = '<input type="hidden" class="hdName" name="'+textName+'" />';
var htmlDiv = '<div class="autoSelectDiv" isHover="false" ></div>';
if($(inputAuto).parent().find("div.autoSelectDiv").length==0) {
$(inputAuto).after(htmlDiv).after(inputHdName).after(inputHdCode);
} else {
$(inputAuto).parent().find("div.autoSelectDiv").removeAttr("style");
}
var isCalcLen = false; // 第一次点击的时候重新计算一下div的宽度，优化
var isCalcLen1 = false; // 第一次点击的时候重新计算一下div的宽度，优化
$(inputAuto).unbind("focus").focus(function(){
var divAT = $(this).parent().find(".autoSelectDiv");
var inputWidth = $(this).outerWidth();
var divWidth = $(divAT).outerWidth();
if(!isCalcLen && parseInt(divWidth) < parseInt(inputWidth)) {
isCalcLen = true;
$(divAT).css({width: parseInt(inputWidth)});
}
divWidth = $(divAT).outerWidth();
if(!isCalcLen1 && $(divAT).find("ul li").length>10) {
isCalcLen1 = true;
$(divAT).css({width: parseInt(divWidth) + 17});
}
$(divAT).show();
});
// 显示div
var divAuto = $(inputAuto).parent().find(".autoSelectDiv");
$(divAuto).unbind("hover")
.hover(
function() {
$(this).attr("isHover", "true");
}, function() {
$(this).attr("isHover", "false");
});
$(inputAuto).unbind("hover")
.hover(
function() {
$(this).attr("isHover", "true");
}, function() {
$(this).attr("isHover", "false");
});
$(inputAuto).unbind("blur").blur(function(){
var isHover = $(divAuto).attr("isHover");
if(isHover!="true") {
$(divAuto).hide();
if(callback && typeof(callback)=="function") {
callback($(inputAuto));
}
}
});
$("body").unbind("click").click(function(){
var isDivHover = $(divAuto).attr("isHover");
var isInputHover = $(inputAuto).attr("isHover");
if(isDivHover=="false" && isInputHover=="false") {
$(divAuto).hide();
if(callback && typeof(callback)=="function") {
callback($(inputAuto));
}
}
});
// 上下键、回车键事件
$(document).unbind("keydown").keydown(function(e) {
var keyCode = e.keyCode;
// PageUp
if(keyCode==38) {
upDownKey4Select(UP_DOWN_KEY.KEY_UP);
}
// PageDown
if(keyCode==40) {
upDownKey4Select(UP_DOWN_KEY.KEY_DOWN);
}
// Enter
if(keyCode==13) {
var currSelectDiv = $("div.autoSelectDiv:visible");
$(currSelectDiv).attr("keySelected", "true");
var objLi = $(currSelectDiv).find("ul > li.active");
if($(objLi).length>0) {
$(objLi).click();
$(currSelectDiv).prev().prev().prev().blur();
}
}
});
}
function upDownKey4Select(keyFlag) {
var currSelectDiv = $("div.autoSelectDiv:visible");
if($(currSelectDiv).length==0) return null;
$(currSelectDiv).prev().prev().prev().focus();
var top = $(currSelectDiv).offset().top;
var scrollTop = $(currSelectDiv).scrollTop();
var currLi = $(currSelectDiv).find("ul > li.active");
var objLi = null;
if($(currLi).length==0) {
objLi = $(currSelectDiv).find("ul > li:eq(0)");
$(objLi).addClass("active").scrollTop(0);
} else {
var liTop = $(currLi).offset().top;
if(UP_DOWN_KEY.KEY_UP==keyFlag) {
var tmpLiHeight = liTop-top;
if(tmpLiHeight>255) {
$(currSelectDiv).scrollTop(scrollTop+(tmpLiHeight-283));
} else if(tmpLiHeight<28) {
$(currSelectDiv).scrollTop(scrollTop-(28-tmpLiHeight));
}
} else if(UP_DOWN_KEY.KEY_DOWN==keyFlag) {
var tmpLiHeight = 255-(liTop-top);
if(tmpLiHeight>255) {
$(currSelectDiv).scrollTop(scrollTop-(tmpLiHeight-283));
} else if(tmpLiHeight<28) {
$(currSelectDiv).scrollTop(scrollTop+(28-tmpLiHeight));
}
}
if(UP_DOWN_KEY.KEY_UP==keyFlag) {
objLi = $(currLi).prev();
} else if(UP_DOWN_KEY.KEY_DOWN==keyFlag) {
objLi = $(currLi).next();
} else {
return null;
}
if($(objLi).length==0) return null;
$(objLi).addClass("active");
$(currLi).removeAttr("class");
}
return objLi;
}
var optionAllText = "------- 全部 -------";
/***
* 绑定自动补全下拉框
* @param contanerId 容器ID
* @param ifAll 是否需要全选
* @param callback 回调函数
* @return
*/
function bindAutoSelect(contanerId, ifAll, callback){
$("#"+contanerId).autoSelect(function(inputAutoObj){
// 如果没有选择，关闭选项div的时候清空输入框的内容
var hdCode = $(inputAutoObj).parent().find("input[type='hidden'].hdCode").val();
if(hdCode=="" && $(inputAutoObj).val()!=optionAllText) {
$(inputAutoObj).val("");
var dftCon = $(inputAutoObj).attr("dftCon");
loadSelectOptions($(inputAutoObj).attr("url"), "", inputAutoObj, ifAll, false, "", dftCon, "autoSelect", callback);
}
});
$("#"+contanerId + " .autoSelect").each(function(){
var inputAuto = $(this);
bindSelect(inputAuto, "autoSelect", ifAll, callback);
});
}
/***
* 绑定自动补全下拉框(可做级联)
* 给某个输入框绑定下拉功能
* @param selectId 元素ID
* @param ifAll 是否需要全选
* @param callback 回调函数
* @return
*/
function bindCascadeAutoSelect(selectId, ifAll, callback){
$("#"+selectId).cascadeAutoSelect(function(inputAutoObj){
// 如果没有选择，关闭选项div的时候清空输入框的内容
var hdCode = $(inputAutoObj).parent().find("input[type='hidden'].hdCode").val();
if(hdCode=="" && $(inputAutoObj).val()!=optionAllText) {
$(inputAutoObj).val("");
var dftCon = $(inputAutoObj).attr("dftCon");
loadSelectOptions($(inputAutoObj).attr("url"), "", inputAutoObj, ifAll, false, "", dftCon, "cascadeAutoSelect", callback);
}
});
var inputAuto = $("#"+selectId);
bindSelect(inputAuto, "cascadeAutoSelect", ifAll, callback);
}
/***
* 绑定初始下拉
* @param inputAuto
* @param selectClass过滤autoSelect的class属性值 （autoSelect、cascadeAutoSelect）
* @param ifAll
* @param callback
* @return
*/
function bindSelect(inputAuto, selectClass, ifAll, callback) {
$(inputAuto).attr("placeholder","------- 请选择 ------");
var filterText = "";
var dftVal = $(inputAuto).attr("dftVal"); // 默认选中值属性
var dftCon = $(inputAuto).attr("dftCon"); // 默认条件，如级联时上级选择的条件
var url = $(inputAuto).attr("url");
if(dftVal) {
loadSelectOptions(url, filterText, inputAuto, ifAll, true, dftVal, dftCon, selectClass, callback);
} else {
loadSelectOptions(url, filterText, inputAuto, ifAll, true, "", dftCon, selectClass, callback);
}
var origVal = "";
$(inputAuto).focus(function() {
origVal = $(this).val();
});
var origValKeyUp = "";
$(inputAuto).keyup(function(){
if($(this).val() && $(this).val()==origVal) {
return;
}
if(origVal==optionAllText) {
origVal = "";
$(this).val("");
}
var text = $(this).val();
if(origValKeyUp==text) {
return;
}
origValKeyUp = text;
$(this).parent().find("input[type='hidden'].hdCode").val("");
$(this).parent().find("input[type='hidden'].hdName").val("");
loadSelectOptions(url, text, this, ifAll, false, "", dftCon, selectClass, callback);
});
}
/***
* 加载下拉列表
* @param url
* @param filterText
* @param inputAuto
* @param ifAll 是否需要全选
* @param isLoad 默认加载（true页面进来自动加载，false：输入检索自动补全时）
* @param dftVal 默认选项值
* @param dftCon 默认条件，如级联下拉时上级选中的值
* @param selectClass过滤autoSelect的class属性值 （autoSelect、cascadeAutoSelect）
* @param callback 回调
* @return
*/
function loadSelectOptions(url, filterText, inputAuto, ifAll, isLoad, dftVal, dftCon, selectClass, callback) {
$.ajax({
url: url,
type:"post",
data:{filterText:filterText,dftCon:dftCon},
success:function(data){
var divAuto = $(inputAuto).parent().find(".autoSelectDiv");
if(data && data.length>0){
if(!(data instanceof Array)) {
$(divAuto).html('<ul><li class="text-center text-danger">无法获取数据</li></ul>');
return;
}
var hdCode = $(inputAuto).parent().find("input[type='hidden'].hdCode");
var hdName = $(inputAuto).parent().find("input[type='hidden'].hdName");
var htmlUl = '<ul>';
// 加载的时候， 有默认值就选择默认值， 没有就默认选择第一个
if(dftVal) {
if(ifAll===true && (filterText=="" || filterText==optionAllText)) {
htmlUl += '<li code="">'+optionAllText+'</li>';
}
for(var i=0; i<data.length; i++) {
var vCode = data[i]["code"];
var vName = data[i]["name"];
if(dftVal==vCode) {
htmlUl += '<li code="'+vCode+'" class="active">'+vName+'</li>';
$(inputAuto).val(vName);
$(hdCode).val(vCode);
$(hdName).val(vName);
} else {
htmlUl += '<li code="'+vCode+'">'+vName+'</li>';
}
}
} else {
if(ifAll===true && (filterText=="" || filterText==optionAllText)) {
if(isLoad || $(inputAuto).val()==optionAllText) {
htmlUl += '<li code="" class="active">'+optionAllText+'</li>';
} else {
htmlUl += '<li code="">'+optionAllText+'</li>';
}
}
for(var i=0; i<data.length; i++) {
var vCode = data[i]["code"];
var vName = data[i]["name"];
if(i==0) {
// 如果是输入检索自动补全的时候， isLoad为false
if(ifAll===true && isLoad) {
$(inputAuto).val(optionAllText);
htmlUl += '<li code="'+vCode+'">'+vName+'</li>';
// $(hdCode).val("");
// $(hdName).val("");
} else if(isLoad) {
htmlUl += '<li code="'+vCode+'" class="active">'+vName+'</li>';
$(inputAuto).val(vName);
$(hdCode).val(vCode);
$(hdName).val(vName);
} else {
htmlUl += '<li code="'+vCode+'">'+vName+'</li>';
}
} else {
htmlUl += '<li code="'+vCode+'">'+vName+'</li>';
}
}
}
htmlUl += '</ul>';
$(divAuto).html(htmlUl);
$(divAuto).find("ul li").unbind("click").click(function(){
var code = $(this).attr("code");
var name = $(this).html();
var cnt = $(this).parent().parent().parent();
$(cnt).find("input[type='hidden'].hdCode").val("");
$(cnt).find("input[type='hidden'].hdName").val("");
var ia = $(this).parent().parent().parent().find("." + selectClass);
if(code=="" && name==optionAllText) {
$(ia).val(optionAllText);
}
$(divAuto).hide();
loadSelectOptions(url, "", $(ia), ifAll, false, code, dftCon, selectClass, callback);
});
// 回调函数
if(callback && typeof(callback)=="function") {
callback($(inputAuto).next("input[type='hidden'].hdCode").val());
}
} else {
$(divAuto).html('<ul><li class="text-center text-danger">无匹配项</li></ul>');
}
}
});
}
相关推荐
类似于百度和GOOGLE搜索框那样的自动补全,此代码只是编写了最基础的代码,AJAX部分需要自己写.测试了IE6,IE8,还有FF.都可以正常运行.代码里面加了注释
使用方法： var arr = [1,2,3,4,5,6,7,8]; $("input").addSelectDom(arr); 简单上手，提供自动补全筛选规则
这是一个实现下拉框可输入的有自动补全等功能 这是一个实现下拉框可输入的有自动补全等功能 这是一个实现下拉框可输入的有自动补全等功能 这是一个实现下拉框可输入的有自动补全等功能
修改网上的代码完成的，使用jquery+JavaScript形式写的，服务端代码用java编写，当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程，直接import既可用。也可以提取里面的文件自己修改
类似百度搜索框，可以输入的下拉框，输入信息后能自动匹配数据库里的数据，如果数据库里有马上都能显示出啦，用下拉选择马上可以选择。带数据库功能。本代码通过网友的代码改编整合。
该工程使用lucene和Marco Polo实现了类似百度的拼写补全下拉框，速度快，扩充性好，便于修改，说明详细
可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框 可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框
jQuery仿百度搜索下拉框自动补全代码插件一款高级的自动补全jQuery插件typeahead.js，仿百度搜索下拉框自动补全代码插件。
仿百度搜索下拉框 自动补全输入的内容 进行模糊查询
【ASP.NET编程知识】ASP .NET 可编辑输入自动匹配的下拉框.docx
jQuery仿百度搜索下拉框自动补全代码插件，很方便，类似于百度搜索
jQuery+Ajax搜索框输入文字自动补全代码,一款利用Ajax实现的仿百度搜索自动补全下拉框显示相关列表选项效果。
带搜索功能的select下拉框，类似百度google的搜索框，自己匹配，很好用
自动匹配，可输入可选择的下拉框 可手写，可选择 方便实用。
ASP .NET Webform 利用Telerik第三方Dropdownlist控制实现可编辑，输入自动匹配的下拉框（支持中文输入匹配），代码简单，适合下拉列表选项多时使用该控件，快速检索选项
C#ComboBox自动补全小技巧 本人收藏了3年的资源 现放出 都是总结了很多系统 软件项目实施过程中的经验的 慢慢积累的
下拉框模糊查询； 可以输入可以直接选择，自动匹配； 非常简单，快捷