jquery 模拟类搜索框自动完成搜索提示功能(改进(2)


<style type="text/css">
.dropDiv {
position: absolute;
z-index: 10;
display: none;
cursor: hand;
}
.dropDiv .jhover {
background-color: #00FEDF;
}
.dropDiv .list {
float:left;
width:100%;
}
.dropDiv .word {
float:left;
}
.dropDiv .view {
float:right;
color: gray;
text-align: right;
font-size: 10pt;
}
</style>


调用方法:

复制代码 代码如下:


<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/autopoint-1.0.1.js"></script>
<script type="text/javascript">
$(function(){
  $("input").autopoint({url:'http://localhost/xun/ajax.svl?method=getsearchhelp'});
});
</script>
<body>
  <input type="text" size="50" />
  <input type="text" size="50" />
</body>


servlet主要部分:

复制代码 代码如下:


response.setContentType("text/html");
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("UTF-8");
String word = request.getParameter("word");
if(Utils.isBlank(word)) return;
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put("word", word + "a1");
map1.put("view", 10);
Map<String, Object> map2 = new HashMap<String, Object>();
map2.put("word", word + "a2");
map2.put("view", 15);
Map<String, Object> map3 = new HashMap<String, Object>();
map3.put("word", word + "a3");
map3.put("view", 2);
array.add(JSONObject.fromObject(map1));
array.add(JSONObject.fromObject(map2));
array.add(JSONObject.fromObject(map3));
json.put("data", array);
PrintWriter out = response.getWriter();
out.print(json.toString());
out.close();


其中JSONObject和JSONArray类来自json-lib.jar,为了测试方便,是直接返回数据的,实际应用中可以替换为
从数据源查取数据.

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxswz.html