jquery autocomplete 实现搜索提示功能，中文也没问题 -it论坛
jquery autocomplete 实现搜索提示功能，中文也没问题 -it论坛-计算机论坛1.网上参考了很多的搜索提示代码，最后还是得自己写这个插件首先贴上一张图：
http://hi.csdn.net/attachment/201111/11/0_1321002192zVDr.gif
2.感谢http://www.cnblogs.com/askew/archive/2010/01/18/1650703.html 此作者在提示下写出了这个插件
3.注意jquery 的类库要用jquery autocomplete 自带的库，我用最新的jquery 1.7 一直会弹出个窗口，并无法显示搜索结果。
4.源码：-it论坛-计算机论坛<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<script src="jquery.autocomplete.js"></script>
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(){
function parseFn(data) {
var rows = [];
for(var i=0; i<data.length; i++){
rows = {
data:data, //下拉框显示数据格式
value:data.name, //选定后实际数据格式
result:data.name //选定后输入框显示数据格式
};
}
return rows;
}
$("#providerjc").autocomplete("search", {
minChars: 0, //激活自动完成的输入字符数
width: 150,
matchContains: "word", //只要包含输入字符就会显示提示
autoFill: true, //自动填充输入框
dataType: 'json', //数据格式
parse: parseFn,
formatItem: function(row, i, max) {
var item="<table id='auto"+i+"' style='width:100%;'> <tr> <td align='left'>"+row.name+"</td><td align='right' style='color:green;'>"+row.num+"</td></tr></table>" ;
return item;
}
/* 这里我借鉴了一位javaeye 网友的调用方式。但发现formatMatch和formatResult两个方法不被调用。
我猜是使用parse 方法的原因。这时需要在调用result 方法，实现填充其他数据
,
formatMatch: function(row, i, max) {
return row.providerjc;
},
formatResult: function(row) {
return row.providerid;
}
*/
}).result(function(event, data, formatted){
$("#providerid").val(data.name); //此处当填充文本框后，会将providerid填充到我的input隐藏域中
});
})
</script>
</head>
<body>
<div align="center" class="search_div">
<table align="center" width="450">
<tr>
<td>票务名称：</td><td><input type="text" name="providerjc" id="providerjc" style="width:230px" title="请输入票务的名称"/></td>
</tr>
</table>
</div>
</body>
</html>服务器端代码 servlet ： -it论坛-计算机论坛package com.wcb;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class search
*/
public class search extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String q= new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8");
System.out.println("====关键字====="+q);
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String json="[{ name:'美女',num: '56' },{ name:'机车美女',num:'23' },{ name:'美女和野兽', num:'22' },{ name:'醉酒后的美女', num:'85' }]";
out.println(json);
out.close();
}
// <editor-fold defaultstate="collapsed" desc="HttpServlet 方法。单击左侧的 + 号以编辑代码。">
/**
* Handles the HTTP <code>GET</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP <code>POST</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*/
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
本文摘自：http://blog.csdn.net/chuxu000/article/details/6960528
强烈感谢楼主
static/image/common/sigline.gif
批发高品质15V6A桌面式电源适配器
页:
[1]