Javascript 如何使用jQuery UI自动完成扩展程序进行文本搜索

我正在使用jQueryUIAutoCompleteExtender来填充列表。 在这里，我包括这一点，以便更多地参考我的代码细节

这里我修改了自动完成的方法。在本文中，从css类调用，我希望从控件的ID调用

这是我的jQuery脚本：

    <script type="text/javascript">
       $(document).ready(function () {
           SearchText();
       });
       function SearchText() {
           $("#<%=txt_reason.ClientID %>").autocomplete({
               source: function (request, response) {
                   $.ajax({
                       type: "POST",
                       contentType: "application/json; charset=utf-8",
                       url: "Raise_Ticket.aspx/SearchReasons",
                       data: "{'prefixText':'" + $("#<%=txt_reason.ClientID %>").val() + "'}",
                       dataType: "json",
                       success: function (data) {
                           response(data.d);
                       },
                       error: function (result) {
                           alert("Error");
                       }
                   });
               }
           });
       }
</script>

这是我的方法：

[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
[System.Web.Services.WebMethod]
public static List<string> SearchReasons(string prefixText)
{
    using (DataClassesDataContext db = new DataClassesDataContext())
    {
        var query = db.Reasons.Where(r => r.ReasonText.Contains(prefixText)).Select(r => r).ToList();
        List<string> reasons = new List<string>();
        foreach (var item in query)
        {
            reasons.Add(item.ReasonText.ToString());
        }
        return reasons;
    }
}

问题在于检测不到此文本框不显示结果。

使用此选项

<script type="text/javascript">
       $(document).ready(function () {
           SearchText();
       });
       function SearchText() {
           $("#txt_reason").autocomplete({
               source: function (request, response) {
                   $.ajax({
                       type: "POST",
                       contentType: "application/json; charset=utf-8",
                       url: "Raise_Ticket.aspx/SearchReasons",
                       data: "{'prefixText':'" + $("#txt_reason").val() + "'}",
                       dataType: "json",
                       success: function (data) {
                           response(data.d);
                       },
                       error: function (result) {
                           alert("Error");
                       }
                   });
               }
           });
       }
</script>

---

在代码中使用Tern变量

您能提供html标记吗？控制台中有错误吗？我已经找到了解决方案，现在自动完成扩展程序正在工作。当用户从搜索结果中选择某个内容或将光标移动到这些内容，然后列表消失时，我遇到了一个小问题。请在JSFIDDLE上提供该问题的演示。没问题。但我提供了从列表中选择项的用户。当我移动光标结果列表时，它就会消失。这取决于您使用的jquery，否则它会给出结果，直到您单击页面的其他区域。请查看此场景中的工作内容。尝试删除此contentType:application/json；charset=utf-8，我更新了我的jquery-ui.js文件，现在它像一个符咒一样工作。。

$(document).ready(function () {
        $("#textbox").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "URL",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },

                    success: function (retrieveddata) {
                        if (retrieveddata.length > 0) {
                    }
                    },
                    error: function (request, status, error) {
                        console.log("Error! " + request.responseText);
                    }
                })
            },
        });
 })