Question

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

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

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

有什么想法吗？

Answer 1

您可以使用以下内容。注意“刷新”部分。您应该将您的查询结果作为JSON从webservice返回，然后解析它。解析后，您可以为我在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");
            });
        }
    });

Answer 2

我只添加了Keyword类并将其返回。

它有效。

public class KeywordHandler : IHttpHandler
{
    class Keyword
    {
        public string value { get; set; }
    }

    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 distinct Keyword from [dbo].[Log] where " + "Keyword like @SearchText + '%' and ResultCount != 0";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;

                List<Keyword> suggestedList = new List<Keyword>();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        suggestedList.Add(new Keyword { value = sdr["Keyword"].ToString() });
                    }
                }
                conn.Close();

                suggestedList.OrderBy(x => x.value).ToList();

                context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(suggestedList.Take(10)));
            }
        }
    }

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

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

2 个答案: