Javascript 使用处理程序自动完成JQuery

我正在尝试使用自动完成属性和处理程序创建一个搜索框。 我从数据库中获取了所有单词，但无法显示它们

这是jquery的一部分：

$(function () {
    $("#search-box").autocomplete({
        source: "KeywordHandler.ashx",
        minLength: 1,
        @*select: function (event, ui) {
            alert(ui.item.id + " / " + ui.item.value);
        }*@
    });
});

它是处理器的一部分：

public class KeywordHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string prefixText = context.Request.QueryString["term"];
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["DSN"].ConnectionString;

            using (SqlCommand cmd = new SqlCommand())
            {

                cmd.CommandText = "select Keyword from [dbo].[Log] where " + "Keyword like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;

                StringBuilder sb = new StringBuilder();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        sb.Append(sdr["Keyword"])
                            .Append(Environment.NewLine);
                    }
                }
                conn.Close();
                context.Response.Write(sb.ToString());
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

在handler，我可以得到我需要的所有单词，但不能在搜索框中将它们显示为提供的关键字

---

有什么想法吗？

你可以用下面的方法。注意刷新部分。您应该从webservice以JSON的形式返回查询结果，然后对其进行解析。解析之后，您可以为每个搜索结果项创建列表项，正如我在JQuery代码（代码的最后一部分）中指出的那样

*我写下我的回答是假设你从你的服务中得到了正确的结果

HTML

JQuery

$("#autocomplete").on("listviewbeforefilter", function (e, data) {
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length > 2) {
            $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
            $ul.listview("refresh");

            $.ajax({
                type: "POST",
                crossDomain: true,
                url: serverAddress + "General.asmx/AutoComplete",
                data: "{'q': '" + $input.val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: 'json'
            })
            .then(function (response) {
                var JsonObj = jQuery.parseJSON(response.d);

                $.each(JsonObj, function (i, val) {
                    html += "<li><a href='javascript:changeAutoCompleteText(\"" + val + "\");'>" + val + "&nbsp;<i style='color:grey;font-weight:lighter;'>(</i><i style='text-decoration:underline;color:grey;font-weight:lighter;'>" + val + "</i><i style='color:grey;font-weight:lighter;'>)</i></a></li>";
                });
                $ul.html(html);
                $ul.listview("refresh");
                $ul.trigger("updatelayout");
            });
        }
    });

---

看起来您没有获取真正格式的字符串。你试过使用JSON吗？请检查函数返回的字符串。所以，你可以用我的答案解析JSON。嗨，乔希，也许你是对的，但我用另一种方法解决了。你可以在下面看到答案。谢谢你的努力。

$("#autocomplete").on("listviewbeforefilter", function (e, data) {
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length > 2) {
            $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
            $ul.listview("refresh");

            $.ajax({
                type: "POST",
                crossDomain: true,
                url: serverAddress + "General.asmx/AutoComplete",
                data: "{'q': '" + $input.val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: 'json'
            })
            .then(function (response) {
                var JsonObj = jQuery.parseJSON(response.d);

                $.each(JsonObj, function (i, val) {
                    html += "<li><a href='javascript:changeAutoCompleteText(\"" + val + "\");'>" + val + "&nbsp;<i style='color:grey;font-weight:lighter;'>(</i><i style='text-decoration:underline;color:grey;font-weight:lighter;'>" + val + "</i><i style='color:grey;font-weight:lighter;'>)</i></a></li>";
                });
                $ul.html(html);
                $ul.listview("refresh");
                $ul.trigger("updatelayout");
            });
        }
    });