数据库中有一些员工的基本信息，当用户录入既存员工信息的时候往往希望像百度和谷歌检索那样，自动匹配输入内容，一旦匹配成功，其他的信息自动输入，无需用户再输。可以用jquery.autocomplete插件实现。 比如数据库中有：电话，身份证，姓名这些信息，录入时任何一个时，希望自动完成匹配，匹配成功后，另外两个信息自动完成输入。 导入 <script src="../public/jquery.autocomplete.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../public/jquery.autocomplete.css" />
前台： <script type="text/javascript"> $(function() {
//接收后台的json
var json1 = eval("(" + $("#aujson1").val() + ")");
//匹配电话
$("#iPhone").autocomplete(json1.data, {
formatItem: function(item) { return item.Phone; //当前输入框显示的值}
}).result(function(event, item) { //匹配成功后的动作
$("#iCard").val(item.ShenFen);
$("#iName").val(item.XingMing);
});
//匹配身份证
$("#iCard").autocomplete(json1.data, {
formatItem: function(item) { return item.ShenFen; }
}).result(function(event, item) {
$("#iPhone").val(item.Phone);
$("#iName").val(item.XingMing);
});
//匹配姓名
$("#iName").autocomplete(json1.data, {
formatItem: function(item) { return item.XingMing; }
}).result(function(event, item) {
$("#iPhone").val(item.Phone);
$("#iCard").val(item.ShenFen);
});
});
</script>
<body>
<form id="form1" runat="server">
<input id="aujson1" type="hidden" value="<%=aujson1 %>" />
<div>
电话：<input type="text" id="iPhone" />
身份证：<input type="text" id="iCard" />
姓名：<input type="text" id="iName" />
</div>
</form>
</body> 服务器端：
public partial class 测试_autoComplete : System.Web.UI.Page
{
public string aujson1 = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
StringBuilder strb = new StringBuilder();
//初始化json对象,用于前台获取对象
JSONHelp jsonhelp = new JSONHelp();
jsonhelp.successS = true;
//作成json对象，这个地方可以从数据库读
jsonhelp.addItem("Phone", "123456789");
jsonhelp.addItem("ShenFen", "412829198342342");
jsonhelp.addItem("XingMing", "熊大");
jsonhelp.addItemOk();
jsonhelp.addItem("Phone", "23456789");
jsonhelp.addItem("ShenFen", "353453457031240");
jsonhelp.addItem("XingMing", "熊二");
jsonhelp.addItemOk();
jsonhelp.addItem("Phone", "345678912");
jsonhelp.addItem("ShenFen", "423423423110638");
jsonhelp.addItem("XingMing", "张三");
jsonhelp.addItemOk();
jsonhelp.addItem("Phone", "45678912");
jsonhelp.addItem("ShenFen", "234254310120451");
jsonhelp.addItem("XingMing", "李四");
jsonhelp.addItemOk();
jsonhelp.addItem("Phone", "56789123");
jsonhelp.addItem("ShenFen", "23423409121412");
jsonhelp.addItem("XingMing", "李自成");
jsonhelp.addItemOk();
jsonhelp.addItem("Phone", "789012345");
jsonhelp.addItem("ShenFen", "2234810402487");
jsonhelp.addItem("XingMing", "张大");
jsonhelp.addItemOk();
////////////////////////////////////////////////////////
aujson1 = jsonhelp.ToString();
}
}
}