使用处理程序的 JQuery 自动完成答案

【问题标题】：JQuery autocomplete with using handler使用处理程序的 JQuery 自动完成
【发布时间】：2014-12-16 13:46:21
【问题描述】：

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

这是 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;
        }
    }
}

在处理程序中，我可以获得所有我需要的单词，但无法在搜索框中将它们显示为提供的关键字。

有什么想法吗？

【问题讨论】：

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

标签： javascript c# jquery autocomplete handler

【解决方案1】：

您可以使用如下所示的内容。注意“刷新”部分。您应该从 web 服务以 JSON 格式返回查询结果，然后对其进行解析。解析后，您可以为每个搜索结果项创建列表项，正如我在 JQuery 代码（代码的最后部分）中指出的那样。

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

HTML

<div id="assignDiv" style="display:none;">
                <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
                    <h3>Select contact:</h3>                    
                    <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search contact..." data-filter-theme="d"></ul>
                </div>

                <input type="button" value="Send to selected contact" id="assignToBtn" />
            </div>

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");
            });
        }
    });

【讨论】：