asp.NET jqueryUI autocomplete

Question

Как описано в заголовке, у меня возникла небольшая проблема с получением виджета jqueryUI для автозаполнения.

Звучит глупо, но i m hanging the whole day getting that thing solved, but i didn t. Я разработал несколько лет C# и теперь пытаюсь, начиная с месяца или около того ..., для разработки с asp и jquery. Просто для показа, я искал в Интернете, и особенно stackoverflow, и много пробовал, чтобы запустить его.

Хорошо, вот код.

Определение TextBox:

<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, называемой автоматической точкой с запятой. Оператор return в вашей функции обратного вызова/jQuery отображается неправильно.

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

Это должно быть правильный синтаксис:

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

JavaScript компилятор добавляет автоматическую точку с запятой за оператора возврата в первом случае, в результате чего она не возвращать ничего/не определено.

This SO question имеет очень хороший обзор правил для этого поведения.

Answer 2

У меня есть автозаполнение, использующее asp.net, C# on .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

Проблема решена.

Это работает, с помощью Мирослава Поповича, я получил работу, это была действительно бесполезная функция JavaScript «автоматическая точка с запятой».

С изменением структуры кода все работает нормально.

Здесь `s исправленная часть:

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

THX - Ко всему, что помогло