功能优化，
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>');
}
}
});
}
相关推荐
自动补全的核心是监听用户在输入框中的输入事件，如`onkeyup`或`onkeydown`，然后根据输入内容与预设的数据集进行匹配，将匹配结果展示在下拉框中。 2. **HTML结构**： 基本HTML结构包括一个输入框（`<input>`）...
在IT行业中，创建一个“可以输入带自动匹配的下拉框”是常见的需求，尤其在网页交互设计中。这样的功能通常被称作自动补全（AutoComplete）或智能搜索框，它极大地提升了用户输入数据的效率和用户体验。下面将详细...
"最简便的可输入的下拉框（带自动补全）"是一个针对这个需求的解决方案，它允许用户在下拉框中输入文字，并提供自动补全功能，提高了用户输入数据的效率和准确性。这种功能常见于搜索框、地址选择器或者选项过滤等...
在实际应用中，开发者可以根据需求自定义自动补全的逻辑，比如设置数据源、调整下拉框的显示数量、定义匹配算法等。通过熟练掌握jQuery的这些基本知识点，可以方便地将这个插件集成到自己的项目中，为用户提供便捷的...
本示例以“仿百度搜索下拉框”为主题，探讨如何实现一个自动补全的功能，它能够在用户输入时根据已输入的部分文字，预测并显示可能的完整词汇或短语，提高用户输入效率。 自动补全的核心在于实时性和准确性，它涉及...
这种组件通常被称为“智能下拉框”或“自动补全下拉框”。在网页设计、应用程序开发，尤其是前端交互设计中，它是不可或缺的一部分。 “Select”标签在HTML中是用于创建下拉菜单的基本元素，但传统SELECT标签只能...
然而，为了提供更友好的用户体验，有时我们需要为ComboBox添加自动补全功能，使得用户在输入时能快速匹配并选择合适的选项。本篇文章将深入探讨如何实现C# ComboBox的自动补全特性，以及在实际项目中积累的一些实用...
这个功能常见于许多应用程序中，如搜索引擎、下拉菜单等，它允许用户在输入时自动显示与输入内容相匹配的建议。 在Java SWT中，我们可以利用`Text`组件来创建基本的文本框，并结合监听器和数据结构来实现自动匹配...
总之，HTML可编辑下拉框结合JavaScript自动补全功能是提高网站或应用交互性的一个有效手段。通过监听用户输入、过滤选项并动态显示匹配项，我们可以创建一个既直观又高效的输入体验。对于开发者来说，掌握这项技术有...
【标题】"AJAX仿百度输入自动补全源码,下拉框提示源码" 描述了一种使用AJAX技术来实现类似百度搜索框的自动补全功能的应用。这种技术通常用于提高用户输入效率，通过实时获取服务器端数据并在用户输入时动态显示建议...
typeahead.js是由Twitter开发的一款强大的自动补全插件，它可以实时预测并展示用户输入的匹配结果，极大地提升了搜索效率。 二、typeahead.js的工作原理 typeahead.js通过监听用户在搜索框中的输入事件，实时查询...
- 提示列表的设计应简洁明了，易于阅读，可考虑使用下拉框样式，或者浮动层显示。 - 可以添加清除按钮，方便用户快速清空输入。 - 配合键盘导航，用户可以通过上下键选择建议，回车键确认选择。 6. **安全考虑**...
在VC++编程环境中，开发人员经常需要为用户提供方便的输入辅助功能，比如自动补全功能。这个"VC++文本框+下拉框=组合框,具有自动补全功能Edit.Combox_非常棒！"的项目就是一个很好的示例，它结合了编辑框（Edit）和...
支持手动输入的下拉框，即用户可以在一个下拉框中输入文字，系统会根据输入内容动态展示匹配的建议列表。这种设计提升了用户体验，因为它减少了用户在大量选项中查找所需项的时间，同时允许用户输入未包含在预设选项...
8. **用户体验优化**：为了提高用户体验，可以添加一些附加功能，比如自动补全（在用户停止输入一段时间后自动选择最匹配的项）、清除输入按钮、下拉提示等。 9. **插件使用**：在实际开发中，为了快速实现这一功能...
8. **可扩展性**：设计的系统应该具有良好的可扩展性，能够轻松添加新的数据源或调整匹配算法。 在提供的文件“31_实现仿GoogleSuggest自动补全的功能.avi”中，可能包含了实现这一功能的具体步骤和示例代码。通过...