c# - asp.net jqueryUI自动完成

标签 c# jquery asp.net .net jquery-ui

就像标题中所述,我在使jqueryUI自动完成小部件工作时遇到了一些问题。

听起来很傻,但我却没有。我已经开发了几年的C#,现在,从一个月左右开始,就尝试使用ASP和JQuery进行开发。只是为了展示,我搜索了网络,尤其是stackoverflow,并尝试了很多以使其运行。

好的,这里是代码。

定义文本框:

 <asp:TextBox ID="txtSearchbox"
                    style="float:left;padding:5px 1px 5px 1px;" runat="server" >
 </asp:TextBox>


AutoComplete Jquery脚本部分:

<script type="text/javascript">

    $(document).ready(function () {
        $('#txtSearchbox').autocomplete( {
         source: function (request, response) {
                    //console.log(request.term);
             $.ajax
             ({
                 url: "AutoComplete.asmx/GetSearchInfo",
                 data: "{ 'prefixText': '" + request.term + "' }",
                 dataType: "json",
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 dataFilter: function (data) {
                     //console.log(data.toString());
                     //alert(data.toString());
                     return data;
                 },
                 success: function (data) {
                     // console.log(data.d.toString());
                     response($.map(data.d, function (item) {
                         // console.log(item.Isin)
                         // console.log(item.Name)
                         return
                         {
                             label: item.Name.toString()
                             value: item.Name.toString()
                         }
                     }));
                },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert(textStatus);
                 }
             });
         },
         minLength: 2
         });
    });

</script>


AutoComplet.asmx:

[WebMethod]
public List<SearchObject> GetSearchInfo(string prefixText) 
{
    var seo = new SearchObject();
    var getSeo = staticList.getSEOlist().Where(str => str.SearchString.ToLower().Contains(prefixText.ToLower()));

    return getSeo.ToList();
} 


为了完整起见,CSS:

    /*AutoComplete flyout */
.autocomplete_completionListElement
{
    margin:0px!important;
    background-color:#ffffff;
    color:windowtext;
    border:buttonshadow;
    border-width:1px;
    border-style:solid;
    cursor:'default';
    overflow:auto;
    height:200px;
    font-family:Tahoma;
    font-size:small;
    text-align:left;
    list-style-type:none;
    padding: 5px 5px 5px 5px;
    }

/* AutoComplete highlighted item */
.autocomplete_highlightedListItem
{
    background-color:#ffff99 ;
    color:black;
    padding:0px;
    }

    /* AutoComplete item */
.autocomplete_listItem
{
    background-color:window;
    color:windowtext;
    padding:0px;
   }


如果您需要更多,请告诉我。

调试行过时。

如果我检查jquery部分,我会得到我想要的数据,但不会在txtsearch中显示。
而且我并不真正了解该AutoComplete jquerUI方法将如何显示该列表,但是编码应该是正确的。

最佳答案

实际上,您可能是非常讨厌的JavaScript功能(称为自动分号插入)的受害者。成功回调/ jQuery映射函数中的return语句写错了。

return
{
    label: item.Name.toString()
    value: item.Name.toString()
}


这应该是正确的语法:

return {
    label: item.Name.toString()
    value: item.Name.toString()
}


JavaScript编译器在第一种情况下会在return语句后添加一个自动分号,从而使其不返回任何内容/未定义。

This SO question很好地概述了此行为的规则。

关于c# - asp.net jqueryUI自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10818606/

相关文章:

c# - 实现属性或实现子类

c# - 如何将不同命名空间中的旧代码导入我当前的项目?

c# - Serilog - 覆盖配置值

javascript - 使用 Handlebars.js 助手通过 jQuery 创建事件元素?

asp.net - SignalR 处理 HubConnection

asp.net - TextBox 导致 ASP.NET 中的按钮回发

c# - 何时使用 Dispose 或何时使用 Using

javascript - javascript 中的 URL 编码

javascript - 使用javascript单击div部分外部后如何删除文本样式?

asp.net - 是否有可以扫描 asp.net 项目并构建站点地图的工具?