asp.NET jqueryUI自动完成

Question

像标题中描述的那样，我得到了让jqueryUI自动完成Widget工作的一个小问题。

这听起来很愚蠢，但我m hanging the whole day getting that thing solved, but i didn吨。我已经开发了几年C＃，现在正在努力，因为一个月左右...，用asp和jquery开发。为了显示，我搜索了网页，特别是stackoverflow，并试图让它运行。

确定这里的代码。

定义文本框：

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

自动完成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。 我真的不明白自动完成jquerUI方法如何显示该列表，但编码应该是正确的。

Answer 1

实际上，您可能会成为称为自动分号插入的非常令人讨厌的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对此行为的规则有很好的概述。

Answer 2

我有自动运行使用asp.net，c＃.net 4.这是我如何做到这一点。

//为.aspx页面中，

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
    <Services> 
     <asp:ServiceReference Path="/PathToServiceHere/AutoComplete.svc" />    
    </Services> 
</asp:ScriptManager> 

//文本框，我这里不使用服务器端的文本框，但我不认为这是一个问题的jQuery

<input id="ModelBox" type="text" style="width: 158px;" /> 

// Jquery的

 $(function() { 
      $("#ModelBox").autocomplete({ 
       minLength: 0, 
       delay: 0, 
       cache: true, 
       source: function (req, addToList) { 

        var popList = new GetAutoCompleteService.GetAutoComplete(); 
        popList.GetModels(req.term, function (model) { 

         var listItems = []; 
         if (model.length > 0) { 
          for (var key = 0; key < model.length; key++) { 
           listItems.push(model[key].Model); 
          } 
         } else { 
          listItems.push("No Matching Model."); 
         } 
         addToList(listItems); 
        }, function onError() { 
        }); 
       } 
      }); 

      $("#ModelBox").click(function() { 
       // close if already visible 
       if ($("#ModelBox").autocomplete("widget").is(":visible")) { 
        $("#ModelBox").autocomplete("close"); 
        return; 
       } 

       // work around a bug (likely same cause as #5265) 
       $(this).blur(); 

       // pass empty string as value to search for, displaying all results 
       $("#ModelBox").autocomplete("search", ""); 
       $("#ModelBox").focus(); 
      }); 
     }); 

// AutoComplete.svc

namespace autocomplete.Service 
    { 
     using System.Collections.Generic; 
     using System.Linq; 

     using System.ServiceModel; 
     using System.ServiceModel.Activation; 

     using System.Data; 

     [ServiceContract(Namespace = "GetAutoCompleteService")] 
     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
     public class GetAutoComplete 
     { 

      [OperationContract] 
      public List<Models> GetModels(string model) 
      { 

       // Data access here to retrieve data for autocomplete box then convert to list 

    // or however you get the data into list format 
       List<Models> List = dataJustPulled.ToList(); 
       return List; 
      } 
     } 
    } 

Answer 3

问题解决。

它的工作，在Miroslav Popovic的帮助下，我得到了工作，这是真正无用的JavaScript功能'自动分号插入'。

稍微改变代码结构一切正常。

Here`s修正部分：

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

THX - 所有帮助