输入中文自动查询展示如图：输入“山西”
好了来代码：
html
<input id="sitenameCn" name="sitenameCn" type="text" class="inputxt" placeholder="请输入关键字搜索" onkeyup="catch_keyword(this.value)" >
<div id="tips" style="display: none; width:90%; border: 1px solid pink";></div>
js代码：
<script>
window.onload=
function() {
//获取文本输入框
var textElment = document.getElementById("sitenameCn"
);
//获取下提示框
var div = document.getElementById("tips"
);
textElment.onkeyup =
function () {
//获取用户输入的值
var text =
textElment.value;
//如果文本框中没有值或者值不是中文，则下拉框被隐藏，不显示
if ((text = text.replace(/\s*/g, "")) == "" || !isChn(text)
) {
div.style.display = "none"
;
return;
} else {
var url = '<%=basePath%>/smoHosptialInfoController.do?seach&sitenameCn=' +
text;
var childs=""
;
$.ajax({
type: 'GET'
,
url: url,
dataType: "json"
,
success: function (obj) {if (obj == ""
) {
//把childs 这div集合放入到下拉提示框的父div中，上面我们以获取了
div.innerHTML = "没有这家医院请先添加"
;
div.style.display = "block"
;
return;
} //遍历自己的数据，获取到自己数据里面的值就可以了，我这里返回的是对象，直接.属性出来值，根据自己的数据格式取值即可
for (
var i = 0; i < obj.length; i++
) {
childs += "<div οnclick=Write(this) οnmοuseοut='recoverColorwhenMouseout(this)' οnmοuseοver='changeColorwhenMouseover(this)'>"
+ obj[i].sitenameCn +
"</div>"
;
}
div.innerHTML =
childs;
div.style.display = "block"
;
},
error: function (xhr, errorText, errorType) {
//xhr:XMLHttpRequest对象 errorText:错误信息 erroType：（可选）捕获的异常对象
alert('错误');
//自定义错误
alert(errorText + ':' +
errorType);
alert(xmr.status + ':' +
xmr, statusText);
}
});
}
sea =
text;
};
};
//判断字符串是否全是中文
function isChn(str) {
var reg = /^[\u4E00-\u9FA5]+$/
;
if (!
reg.test(str)) {
return false;
} else {
return true;
}
}
//鼠标悬停时改变div的颜色
function changeColorwhenMouseover(div){
div.style.backgroundColor="pink"
;
}
//鼠标移出时回复div颜色
function recoverColorwhenMouseout(div){
div.style.backgroundColor=""
;
}
//当鼠标带点击div时，将div的值赋给输入文本框
function Write(div){
//将div中的值赋给文本框
document.getElementById("sitenameCn").value=
div.innerHTML;
//让下拉提示框消失
div.parentNode.style.display="none"
;
};
</script>
后台代码：
后台自己定义自己的数据格式就可以了，我返回的是json数组对象
@RequestMapping(params = "seach"
)
@ResponseBody
public List<SmoHosptialInfoEntity>
getHosptialName(SmoHosptialInfoEntity smoHosptialInfo, HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) {
//查询-机构相关
String hql0 = "from SmoHosptialInfoEntity where 1 = 1 AND sitename_cn like ? "
;
try {
List<SmoHosptialInfoEntity> smoHosptialInfos = systemService.findHql(hql0, "%"+smoHosptialInfo.getSitenameCn()+"%"
);
return smoHosptialInfos;
} catch (Exception e) {
return null;
// throw new BusinessException(e.getMessage());
}
}
转载于:https://www.cnblogs.com/L-o-g-i-c/p/11357439.html
相关资源：Servlet Ajax实现简易的仿百度搜索框智能提示
