`
yulon
  • 浏览: 117792 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

自定义标签之带文本自动完成的下拉框

阅读更多
1、使用说明,如在添加人员页面中使用,调用的页面必须要引入jquery库及标签<%@ taglib uri="/web-tags" prefix="tc" %>
<th>职称:</th>
          <td>
          <tc:selectTextTag defaultValue="1010" width="220px" name="orgUser.title" dispayProperty="titleName" id="orgTitleId" optionValueProperty="titleId"  objList="${orgTitleList}"/>
</td>
属性说明:defaultValue:是下拉框默认的值,可以是el表达式,对应select-->option被选中的value值 (可选)
              width:下拉框的宽度,默认为100%px  (可选)
              name : 对应下拉框select-->name的值   (必填
              objList: 要遍历的List 集合                   (必填
                id:对应select的id                             (必填
              dispayProperty: 要取的javabean的属性 ,对应<option>dispayProperty</option>  (必填
              optionValueProperty:要取的javabean的属性,对应select-->option的value值对应的属性值, (必填
             对应<option value="optionValueProperty"></option>
显示的效果图:


 2、标签处理类:
public class SelectTextTag extends TagSupport{

	private static final long serialVersionUID = 1L;
	private static Configuration freemarkerCfg = FreemarkerUtil.getConfiguration();
	private String id="selectId";
	private String name="selectTextName";
	private String defaultValue;
	private String optionValueProperty;
	private String dispayProperty;
	private List<Object> objList;
	private String preStr="selectText_";
	private String width="100%px";
	public int doStartTag() throws JspException {
		JspWriter out=super.pageContext.getOut();
		String basePath=(String)pageContext.getRequest().getAttribute("basePath");
		Writer writer = new StringWriter();
		try {
			Template template = freemarkerCfg.getTemplate("selectText.ftl", "UTF-8");
			SimpleHash root = new SimpleHash(ObjectWrapper.BEANS_WRAPPER); 
			//给模板动态填充数据
			root.put("path",basePath);
			root.put("selectName",name);
			root.put("id", id);
			root.put("selectWidth", width);
			root.put("seelctTextName", preStr+createRandomId(4)+"_"+createRandomId(4));
			//处理模版      
			StringBuffer optionList = new StringBuffer();
			StringBuffer optionDatas=new StringBuffer();
			processMethod(dispayProperty,optionValueProperty);
			 try {
				 for(Object object : objList){
					String selected=" ";
					Method dispayMethod=object.getClass().getMethod(dispayProperty);
					Method optionMethod=object.getClass().getMethod(optionValueProperty);
					Object displayValue=(Object)dispayMethod.invoke(object);
					Object optionValue=(Long)optionMethod.invoke(object);
					if(defaultValue!=null&&(defaultValue.equals(optionValue.toString()))){
						selected=" selected";
					}
					optionList.append("<option value=\""+optionValue.toString().trim()+"\""+selected+">")
					.append(displayValue.toString()).append("</option>");
					optionDatas.append(displayValue.toString()).append(",");
				 }
				 if(optionDatas.length()>1){
					 optionDatas.deleteCharAt(optionDatas.length()-1);
				 }
				root.put("optionDatas",optionDatas.toString());
				root.put("optionList",optionList.toString());
				template.process(root, writer);		
				} catch (Exception e) {
					throw new JspException("自定义带文本框的下拉框处理失败,请检查配置的属性是否存在!");	
				
				}    
			writer.flush();    
			String content = writer.toString();
			writer.close(); 
			out.write(content);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return super.doStartTag();
	}
	private void processMethod(String dispayNameMethod,String optionValueMethod){
		String dispayNameHeadLetter=dispayNameMethod.substring(0,1).toUpperCase();
		String dispayNameLastLetter=dispayNameMethod.substring(1,dispayNameMethod.length());
		this.dispayProperty="get"+dispayNameHeadLetter+dispayNameLastLetter;
		String optionValueHeadLetter=optionValueMethod.substring(0,1).toUpperCase();
		String optionValueLastLetter=optionValueMethod.substring(1,optionValueMethod.length());
		this.optionValueProperty="get"+optionValueHeadLetter+optionValueLastLetter;
	}
	private static String createRandomId(int x){
        Map pool = new HashMap();   
        Random random = new Random();   
        StringBuffer result = new StringBuffer();   
        for (int i = 0; i < x; i++) {   
            int temp = random.nextInt(9);   
            if(pool.containsValue(temp)){   
                x++;       
            }else{   
	            pool.put(i, temp);   
	            result.append(temp);   
            }   
        }       
        return result.toString();   
	}
//....省略get&set方法
}
 3、selectText.ftl模板
<script type="text/javascript" src="${path}js/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript" src="${path}js/selectText.js"></script>
<link rel="stylesheet" href="${path}js/autocomplete/jquery.autocomplete.css" type="text/css" />
 <select name="${selectName}" id="${id}" style="width:${selectWidth}">
    ${optionList}
 </select> 
<SCRIPT LANGUAGE="JavaScript">
  <!--
$(function(){
	 var ${seelctTextName}=new combox("${seelctTextName}","${id}","输入的值不存在!");
 	 ${seelctTextName}.init(${seelctTextName});
 	 var data = "${optionDatas}".split(",");
	$("#${seelctTextName}").autocomplete(data); 
	//改变时更新select框的值
	$("#${seelctTextName}").result(function(event, data, formatted) {
		${seelctTextName}.find();
	});
});
  //-->
</SCRIPT>
 
  • 大小: 8.3 KB
分享到:
评论

相关推荐

    jsp 自定义标签的使用

    4. **JSP页面使用**:在JSP页面上使用自定义标签,传入一个Map对象,标签会自动生成下拉框并填充选项。 四、JSTL与自定义标签的结合 JSTL(JavaServer Pages Standard Tag Library)是JSP的一种标准标签库,包括...

    自动匹配可输入的下拉框

    这通常需要结合canvas或特定的手写输入插件来完成,将手写输入的图形转换为文本,然后应用到自动匹配逻辑中。 5. **性能优化**:当数据集庞大时,为了提高匹配速度和用户体验,开发者可能需要采用懒加载策略,只...

    JSP自定义标签(二) 联想查询

    4. 服务器将结果返回给前端,自定义标签解析并渲染结果,更新下拉框内容。 在JSP页面中使用这个自定义标签时,我们可能会这样写: ```jsp ``` 这段代码会创建一个与`AssociateQueryTag`关联的自定义标签,并设置...

    可编辑下拉框 可以自动匹配

    在IT领域,尤其是在前端开发中,"可编辑下拉框 可以自动匹配"是一种常见的交互元素设计,它结合了输入框与下拉选择框的功能,提供了用户友好的数据筛选和输入体验。这种控件通常被称为`edSelect`,正如标签所示。...

    jquery鼠标点击自定义下拉框插件.zip

    这种方法适合于已经有`&lt;select&gt;`标签的场景,DropDownList.js插件可以将原生的下拉框转换为自定义样式,同时保持原有的数据和行为。开发者只需要简单调用插件并指定选择器,即可完成转换。例如: ```javascript ...

    js 自定义的联动下拉框

    然后,通过选择器找到对应的下拉框,并使用自定义的函数如sSelect来初始化下拉框组件,并设置默认文本和回调函数等属性。 总之,通过编写JavaScript代码,可以创建出既美观又功能强大的自定义联动下拉框,它们不仅...

    zTree实现多选下拉框

    在多选下拉框场景中,这些数据应包含必要的ID和文本信息,以及父节点关系。例如,`data = [{id:1, pId:0, name:"父节点"}, {id:2, pId:1, name:"子节点"}]`。 4. **事件监听与处理**:zTree提供了一系列的事件接口...

    Jquery实现下拉框多选

    2. 分组选择:通过在`&lt;optgroup&gt;`标签中组织`&lt;option&gt;`,可以创建有层次的多选下拉框,帮助用户更好地理解和选择。 3. 全选/全取消:提供一键选择所有选项或清除所有已选选项的功能,简化用户的操作。 三、使用步骤...

    文本框获取焦点弹出下拉框

    标题“文本框获取焦点弹出下拉框”涉及到的是网页交互设计中的一种常见功能,它通常用于实现输入框(input)的自动补全或者下拉选项选择。在Web开发中,这种功能可以极大提升用户体验,让用户能够快速找到并选择所需...

    第22章 Combo(自定义下拉框)组件1

    在本章的学习中,我们将深入理解EasyUI中的Combo(自定义下拉框)组件,这是一个在Web开发中常用于提供用户选择项的交互元素。Combo组件不仅提供了基本的下拉选项,还可以根据需求进行定制,比如添加图片、文本或者...

    jquery搜索自动提示下拉框插件autocomplete-有我自己做的例子-支持中文

    jQuery Autocomplete 是 jQuery UI 库中的一个组件,主要用于输入框的实时搜索提示,它可以基于用户输入的文本快速匹配并显示相关结果。这个插件不仅支持英文,通过适当的配置,同样可以很好地处理中文字符,为中文...

    可输入的下拉框

    这在用户需要频繁输入新值且希望这些值被保留供以后使用时非常有用,例如添加自定义标签或者输入历史搜索词。 3. **一般可输入可下拉**:这种是最基础的可输入下拉框形式,用户可以自由输入,也可以打开下拉列表...

    仿大众点评下拉框

    1. **HTML与CSS**:基础的HTML元素如`&lt;select&gt;`可以创建一个简单的下拉框,但要达到大众点评的效果,我们需要自定义样式。CSS可以用来改变下拉框的外观,包括边框、背景色、字体、尺寸等,使其更符合品牌形象和用户...

    VC 下拉框输入提示-仿搜索提示.rar

    最后,考虑到“VC 源码-其它源码”的标签,这个示例可能包含了非标准的或者自定义的代码组件,例如可能有自定义的控件类或者消息处理器。学习这个源码,不仅可以了解如何在VC++中实现下拉框的搜索提示功能,还可以...

    自定义表单教程 通过XML配置

    表单中的控件类型丰富多样,包括按钮、复选框、单选框、下拉框、文本框、文本区域、密码域、隐藏域、标签、日期选择器、时间选择器以及查询组件。 2. **查询表单与新增/修改表单** 查询表单通常用于用户输入查询...

    jquery可编辑的下拉框combox

    6. **交互逻辑**:添加更多交互功能,如点击下拉列表选项后自动填充输入框,或者当用户输入内容后自动关闭下拉列表。 7. **响应式设计**:确保ComboBox在不同屏幕尺寸和设备上表现良好,这可能需要调整布局和触摸...

    原生js form表单美化插件表单元素input select下拉框

    1. 表单元素:HTML中的标签定义了一个表单,其中可以包含各种表单控件,如(输入框)、(下拉框)、(多行文本框)等。 2. 表单属性:如action(提交表单的URL)、method(提交方式,GET或POST)等,控制表单的行为...

    前端web select 多层级选择。利用 ztree.js 实现下拉框的多选和单选demo.有兴趣的可以了解一下。

    这通常需要监听 zTree 的相关事件,如 `onCheck` 或 `onClick`,然后更新下拉框的显示文本。 在实际项目中,我们还需要处理异步加载、数据同步、状态保存等复杂情况。例如,当用户关闭页面后再次打开,zTree 应该...

    vant的field组件(autocomplete)

    在项目中使用这个自定义的`AutoCompleteField`组件时,可以通过传入`data`属性来指定自动完成的建议数据,同时可以通过`@confirm`事件捕获用户选择的建议值。这样,用户就可以在一个统一的输入框内享受到自动完成的...

Global site tag (gtag.js) - Google Analytics