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 - 所有幫助