jquery autocomplete 自动提示

最新推荐文章于 2021-05-31 14:43:07 发布

zjt1388

最新推荐文章于 2021-05-31 14:43:07 发布

阅读量402

点赞数

分类专栏： js 文章标签： jquery

本文链接：https://blog.csdn.net/zjt1388/article/details/39376387

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

下面是自动提示的例子参考：

jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试自动提示</title>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<style type="text/css">
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus
	{
	border: 0px /*{borderColorHover}*/;
	background: #E6E6E6 /*{bgColorHover}*/;
	font-weight: normal /*{fwDefault}*/;
	color: #0d519c /*{fcHover}*/;
}

.ui-menu .ui-menu-item a {
	color: #0d519c;
}

.ui-menu {
	list-style: none;
	padding: 2px;
	margin: 0;
	display: block;
	float: left;
	background-color: #fff;
	width: auto;
	border: 1px solid #0d519c;
}
</style>
</head>
<body>
	<table>
		<tr>
			<td align="center"><input id="insrShow" type="text"
				size="100" value="" initvalue="输入保险产品代码或名称"
				style="color: rgb(136, 136, 136);" />
			<input type="hidden" id="hiddle_code" name="addCode" />
			</td>
		</tr>
		<tr>
			<td>
				<input type="hidden" id="m_code" />
				<input type="hidden" id="m_sname" />
			</td>
		</tr>
	</table>
	<script type="text/javascript">
		var config = {
			id : "",
			selectFun : function(sname, code) {
				$("#" + this.id).val(sname);
			},
			txt : "请输入保险产品代码\名称"
		};

		function match_init(obj) {
			for ( var key in obj) {
				config[key] = obj[key];
			}
			if ($("#" + config.id).attr("initValue") != null) {
				config.txt = $("#" + config.id).attr("initValue");
			} else {
				$("#" + config.id).attr("initValue", config.txt);
			}
		}

		$(function() {
			$("#" + config.id).autocomplete({
				source : function(request, response) {
					if ($("#" + config.id).val() == "") {
						return;
					}
					$.ajax({
						type : "post",
						url : "/money/baoxian/getinsr.shtml",
						data : {
							input : $("#" + config.id).val()
						},
						dataType : 'jsonp',
						jsonp : 'jsoncallback', //默认callback
						success : function(data) {
							var arr = eval('(' + data.json + ')');
							response($.map(arr, function(item) {
								return {
									label : item.innerCode,
									cname : item.cname
								};
							}));
						}
					});
				},
				select : function(event, ui) {
					var code = ui.item.label;
					config.selectFun(ui.item.cname, code);
					$("#m_code").val(code);
					$("#m_sname").val(ui.item.cname);
					return false;
				},
				focus : function(event, ui) {
					return true;
				},
				minLength : 1,
				autoFocus : true
			}).data("ui-autocomplete")._renderItem = function(ul, item) {
				return $("<li>")
						.append("<a >" + "<span style='float:left;width:85px;padding-right:5px;text-align:left;'>"
									   + item.label + "</span>" + "<span>" + item.cname + "</span>" + "</a>")
						.appendTo(ul);
			};
		});
		function txtInputHint(id){
			var txtInput = $("#" + id);
			if(txtInput.val() == ""){
				txtInput.val(txtInput.attr("initValue"));
			}
			txtPromptFocus(id,txtInput.attr("initValue"));
			txtPromptBlur(id,txtInput.attr("initValue"));
		}
		var txtPromptFocus = function(id,txt){
			var obj = $("#" +id);
			obj.bind("focus",function(){
				if(obj.val() == txt){
					obj.val("");
				}
				obj.css("color","black");
			});
		};
		var txtPromptBlur = function(id,txt){
			var obj = $("#" + id);
			obj.bind("blur", function(){
				if($.trim(obj.val()) == "" || $.trim(obj.val()) == txt){
					obj.val(txt);
					obj.css("color","#888888");
				}else{
					obj.css("color","black");
				}
			});
		};
		$(function() {
			$("#" + config.id).click(function() {
				$("#" + config.id).autocomplete("search");
			});
		});
		$(function() {
			txtInputHint(config.id);
			$("#" + config.id).blur();
		});
		
		$(function() {
			$("#insrShow").click(function() {
				$("#insrShow").autocomplete("search");
			});
		});
		match_init({
			id : "insrShow",
			selectFun : function(sname, code) {
				$("#hiddle_code").val(code);
				$("#insrShow").val(sname);
			}
		});
	</script>
</body>
</html>

后台程序如下：

使用struts2-spring-mybatis框架

package net.makshi.site.action;

import java.util.HashMap;
import java.util.Iterator;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import net.makshi.data.site.domain.InsrPrdInfo;
import net.makshi.data.site.service.InsuranceService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

@Controller("insuranceMatch")
@Scope("prototype")
public class InsuranceMatchAction extends BaseAction {

	private static final long serialVersionUID = 2455845010943810441L;

	/**
	 * 最大证券代码长度
	 */
	public static int MAX_CODE_LEN = 9;
	/**
	 * 最大提示数
	 */
	public static int MAX_PROMPT = 10;

	@Autowired
	private InsuranceService insuranceService;

	private String input;

	private String json;

	public String getInsr() {
		input = input.toUpperCase();
		Pattern pattern = Pattern.compile(input);
		List<InsrMatcher> matchList = new LinkedList<InsrMatcher>();
		Map<String,Object> param = new HashMap<String,Object>();
		List<InsrPrdInfo> insrPrdInfoList = insuranceService.selectInsrPrdInfoCodeAndName(param);
		Iterator<InsrPrdInfo> iterator = insrPrdInfoList.iterator();
		int count = 0;// 最佳位置(0)匹配数
		while (iterator.hasNext()) {
			InsrPrdInfo ipi = iterator.next();
			boolean find = false;
			Matcher matcher = pattern.matcher(ipi.getInnerCode().toString());
			find = matcher.find();

			int start = -1;
			if (find) {
				start = matcher.start();
			}

			// 匹配中文名
			matcher = pattern.matcher(ipi.getPrdName().toUpperCase());
			if (matcher.find()) {
				if (!find) {// 前面没有找到
					find = true;// 找到
					start = matcher.start();
				} else if (matcher.start() < start) {
					start = matcher.start();// 如果匹配位置更加靠前，则使用更加靠前的位置
				}
			}

			if (find) {
				InsrMatcher iMatcher = new InsrMatcher(start,ipi.getInnerCode(),ipi.getPrdName());
				this.putIntoMatchList(matchList, iMatcher);
				if (0 == start) {
					++count;
				}
				if (count >= MAX_PROMPT) {// 最多需要 10 个
					break;
				}
			}
		}
		// 构造 json 字符串
		StringBuilder sb = new StringBuilder();
		sb.append("[");
		for (InsrMatcher tmp : matchList) {
			String iCode = String.valueOf(tmp.getInnerCode());
			String cname = tmp.getPrdName();

			sb.append("{innerCode:\"").append(iCode)
					.append("\",cname:\"").append(cname)
					.append("\"" + "},");
		}
		if (sb.length() > 1) {
			sb.deleteCharAt(sb.length() - 1);// 删除最后一个“,”号
		}
		sb.append("]");
		this.setJson(sb.toString());

		return SUCCESS;
	}

	private void putIntoMatchList(List<InsrMatcher> matchList,
			InsrMatcher iMatcher) {
		if (iMatcher.getPrj() > 0) {
			matchList.add(0, iMatcher);// 需要修改!!!!!!!!!!
			if (matchList.size() > MAX_PROMPT) {// 超载
				matchList.remove(MAX_PROMPT);
			}
			return;
		}
		int i = matchList.size() - 1;
		for (; i >= 0; i--) {
			InsrMatcher tmp = matchList.get(i);
			if (iMatcher.getStart() >= tmp.getStart()) {
				matchList.add(i + 1, iMatcher);// 按匹配位置先后
				break;
			}
		}
		if (i < 0) {// 尚未加入
			matchList.add(0, iMatcher);// 最佳匹配（位置最先），加到开头
		}
		if (matchList.size() > MAX_PROMPT) {// 超载
			matchList.remove(MAX_PROMPT);
		}
	}

	public String getInput() {
		return input;
	}

	public void setInput(String input) {
		this.input = input;
	}

	public String getJson() {
		return json;
	}

	public void setJson(String json) {
		this.json = json;
	}
}

class InsrMatcher{
	public static int PRJ_STOCK = 9;

	/**
	 * 优先级
	 */
	private int prj;
	/**
	 * 匹配位置
	 */
	private int start;
	private int innerCode;
	private String prdName;
	
	public InsrMatcher() {
	}
	
	public InsrMatcher(int prj, int innerCode) {
		this.prj = prj;
		this.innerCode = innerCode;
	}

	public InsrMatcher(int prj, int innerCode, String prdName) {
		this.prj = prj;
		this.innerCode = innerCode;
		this.prdName = prdName;
	}

	public int getPrj() {
		return prj;
	}
	public void setPrj(int prj) {
		this.prj = prj;
	}
	public int getStart() {
		return start;
	}
	public void setStart(int start) {
		this.start = start;
	}
	public int getInnerCode() {
		return innerCode;
	}
	public void setInnerCode(int innerCode) {
		this.innerCode = innerCode;
	}
	public String getPrdName() {
		return prdName;
	}
	public void setPrdName(String prdName) {
		this.prdName = prdName;
	}
}

zjt1388

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery autocomplete 自动提示

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>测试自动提示.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-foc
复制链接

扫一扫

专栏目录