jquery autocomplete 实现搜索提示功能，中文也没问题 -it论坛

安哥网络 · 发表于 2014-1-16 18:07:47

jquery autocomplete 实现搜索提示功能，中文也没问题 -it论坛-计算机论坛
1.网上参考了很多的搜索提示代码，最后还是得自己写这个插件首先贴上一张图：

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[rows.length] = {
data:data[i], 　　　　　　 //下拉框显示数据格式
value:data[i].name, //选定后实际数据格式
result:data[i].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

ksftg · 发表于 2014-11-25 17:34:40

强烈感谢楼主

批发高品质15V6A桌面式电源适配器

		自动登录	找回密码
密码			立即注册

jquery autocomplete 实现搜索提示功能，中文也没问题 -it论坛

相关帖子

优秀会员

助人为乐

辛勤工作

技术精英

多才多艺

优秀班竹

灌水天才

星球管理

宣传大使

灌水之王

财富勋章

版主勋章

动漫勋章

勤奋会员

论坛精英

PS高手

心

8

闪游皮肤

双鱼座

8★8➹

志愿者

乖