您的位置：首页 > 其它

输入框输入模糊查询匹配/提醒

2017-03-18 15:37 429 查看

项目目的：实现一个输入框输入之后能够进行模糊查询匹配；这样给输入者提醒和匹配

项目的实现方式：首先检测输入框的内容变化，然后ajax请求把数据传到后台，通过查询匹配；最后就是数据的展示；

问题难点：查询后的数据展示，因为这不是一个下拉选择框，而是一个普通的选择框；

难点解决：div区域的重叠，就是把要显示的下拉数据位置设置在input框的下边

一、设计步骤：说明：该项目建立在前面的java web项目的基础

1、web项目的搭建，在这里就不在赘述，在前面的文章中已经介绍

2、jsp页面中输入框和下拉框的设计

3、ajax请求的设计

4、后台数据的处理

二、整体结构

1、jsp页面的设计；实现的功能，1、一个输入框和一个div，div隐藏；两个位置的设计 2、下拉框的设计，设计成一个table的结构 3、方向键的触发

<%@ 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=ISO-8859-1">
<title>Insert title here</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#searchresult
{
width: 140px;
position: absolute;
z-index: 1;
overflow: hidden;
left: 140px;
top: 71px;
background: #E0E0E0;
border-top: none;

}
#txt_search
{
font-size:15px;
height:20px;
}
.line
{
font-size: 15px;
background: #E0E0E0;
width: 140px;
padding:0px;
}
.hover
{
background: #007ab8;
width: 140px;
color: #fff;
}
.std
{
width: 150px;
}
</style>
</head>
<body>
success page

<form id="form1" runat="server">
<div>
智能模糊查询提示
<input id="txt_search" type="text" style="width:140px;" />
<div id="searchresult" style="display: none;">
</div>
</div>
</form>

<script type="text/javascript">
$(function () {
$("#txt_search").keyup(function (evt) {
ChangeCoords(); //控制查询结果div坐标
var k = window.event ? evt.keyCode : evt.which;
//输入框的id为txt_search，这里监听输入框的keyup事件
//不为空 && 不为上箭头或下箭头或回车
if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) {

$.ajax({
type: 'post',
async: true, //同步执行，不然会有问题
dataType: "json",
url: "jsonss",   //提交的页面/方法名
data: "{'userName':'" + $("#txt_search").val() + "'}",             //参数（如果没有参数：null）

error: function (msg) {//请求失败处理函数
alert("数据加载失败");
},
success: function (data) { //请求成功后处理函数。
/*  var objData = eval("(" + data.userName + ")");   */
console.log(data);
if (data.length > 0) {
var layer = "";
layer = "<table id='aa'>";
$.each(data, function (idx, item) {
layer += "<tr class='line'><td class='std'>" + item.userName + "</td></tr>";
});
layer += "</table>";

//将结果添加到div中
$("#searchresult").empty();
$("#searchresult").append(layer);
$(".line:first").addClass("hover");
$("#searchresult").css("display", "");
//鼠标移动事件

$(".line").hover(function () {
$(".line").remo
c067
veClass("hover");
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
//$("#searchresult").css("display", "none");
});
//鼠标点击事件
$(".line").click(function () {
$("#txt_search").val($(this).text());
$("#searchresult").css("display", "none");
});
} else {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
}
});
}
else if (k == 38) {//上箭头
$('#aa tr.hover').prev().addClass("hover");
$('#aa tr.hover').next().removeClass("hover");
$('#txt_search').val($('#aa tr.hover').text());
} else if (k == 40) {//下箭头
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
$('#txt_search').val($('#aa tr.hover').text());
}
else if (k == 13) {//回车
$('#txt_search').val($('#aa tr.hover').text());
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
else {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
});
$("#searchresult").bind("mouseleave", function () {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
});
});
//设置查询结果div坐标

function ChangeCoords() {
//    var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
//    var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
var left = $("#txt_search").position().left; //获取距离最左端的距离，像素，整型
var top = $("#txt_search").position().top + 20; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
$("#searchresult").css("left", left + "px"); //重新定义CSS属性
$("#searchresult").css("top", top + "px"); //同上
}

</script>
</body>
</html>

2、实现结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航