求助：利用jquery-autocomplete实现输入姓名首字母自动完成填写功能！！

cxnwb 2017-09-21 04:02:19

本人正在学习WEB编程，后台用C#前台用jsp,遇到些问题：利用jquery-autocomplete实现在textbox中输入姓名的首字母传到后数据库中查找对应的姓名把查询结果回传到前台文本框内的功能。编写的代码如下，运行后文本框输入没有效果，请高人帮助分析哪里有错误，十分感谢！

后台mysql数据库(basepersonne)结构：

前台代码：Default.aspx



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>

    <link type="text/css" href="js/jquery.autocomplete.css" rel="stylesheet" />



   <script type="text/javascript">

       $(function () {

           $("#keyword").autocomplete({

               minLength: 1,

               source: function (request, response) {

                   $.ajax({

                       type: "POST",

                       url: "Handler.ashx?keyword=" + request.term,

                       contentType: "application/json;charset=gb2312",

                       dataType: "json",

                       success: function (data) {

                           response($.map(data, function (item) {

                               return { value: item };

                           }));

                       },

                   });

               }

           });

       });

   </script>



</head>

<body>

    <form id="form1" runat="server">

    <div align="center">

        <fieldset style="width:400px;height:100px;">

            <table border="0" cellpadding="3" cellspacing="3">

                <tr>

                    <td>

                        <asp:Label ID="lblName" runat="server">请输入姓名：</asp:Label>

                    </td>

                

                    <td>

                        <asp:TextBox ID="keyword" runat="server" Width="150px"></asp:TextBox>

                    </td>

                </tr>

            </table>

        </fieldset>       

    </div>

    </form>

</body>

</html>

后台代码：Handler.ashx



<%@ WebHandler Language="C#" Class="Handler" %>



using System;

using System.Web;

using System.Collections.Generic;

using System.Linq;

using System.Web.Script.Serialization;

using System.Text;

using MySql.Data.MySqlClient;

using System.Data;



public class Handler : IHttpHandler

{

    private string[] GetFilteredList(string keyword)

    {

        List<string> resultList = new List<string>();

        string connStr = "Data source=localhost;DataBase=basepersonnel;uid=root;password=admin";

        MySqlConnection conn = new MySqlConnection(connStr);

        conn.Open();

        DataSet ds = new DataSet();

        string sql = "select hname form basepersonnel where spell='" + keyword + "'";

        MySqlDataAdapter da = new MySqlDataAdapter(sql,conn);

        da.Fill(ds);

        for(int i=0;i<ds.Tables[0].Rows.Count;i++)

        {

            resultList.Add(ds.Tables[0].Rows[i].ToString());

        }

        conn.Clone();

        return resultList.ToArray();

    }



    public void ProcessRequest (HttpContext context)

    {

        string keyword = context.Request.QueryString["keyword"];

        if (keyword != null)

        {

            JavaScriptSerializer serializer = new JavaScriptSerializer();

            string jsonString = serializer.Serialize(GetFilteredList(keyword));

            context.Response.Write(jsonString);

            

        }        

    }



    public bool IsReusable {

        get {

            return false;

        }

    }



}