Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jul 15th, 2012  |  syntax: None  |  size: 5.18 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. asp.NET jqueryUI autocomplete
  2. <asp:TextBox ID="txtSearchbox"
  3.                     style="float:left;padding:5px 1px 5px 1px;" runat="server" >
  4.  </asp:TextBox>
  5.        
  6. <script type="text/javascript">
  7.  
  8.     $(document).ready(function () {
  9.         $('#txtSearchbox').autocomplete( {
  10.          source: function (request, response) {
  11.                     //console.log(request.term);
  12.              $.ajax
  13.              ({
  14.                  url: "AutoComplete.asmx/GetSearchInfo",
  15.                  data: "{ 'prefixText': '" + request.term + "' }",
  16.                  dataType: "json",
  17.                  type: "POST",
  18.                  contentType: "application/json; charset=utf-8",
  19.                  dataFilter: function (data) {
  20.                      //console.log(data.toString());
  21.                      //alert(data.toString());
  22.                      return data;
  23.                  },
  24.                  success: function (data) {
  25.                      // console.log(data.d.toString());
  26.                      response($.map(data.d, function (item) {
  27.                          // console.log(item.Isin)
  28.                          // console.log(item.Name)
  29.                          return
  30.                          {
  31.                              label: item.Name.toString()
  32.                              value: item.Name.toString()
  33.                          }
  34.                      }));
  35.                 },
  36.                  error: function (XMLHttpRequest, textStatus, errorThrown) {
  37.                      alert(textStatus);
  38.                  }
  39.              });
  40.          },
  41.          minLength: 2
  42.          });
  43.     });
  44.  
  45. </script>
  46.        
  47. [WebMethod]
  48. public List<SearchObject> GetSearchInfo(string prefixText)
  49. {
  50.     var seo = new SearchObject();
  51.     var getSeo = staticList.getSEOlist().Where(str => str.SearchString.ToLower().Contains(prefixText.ToLower()));
  52.  
  53.     return getSeo.ToList();
  54. }
  55.        
  56. /*AutoComplete flyout */
  57. .autocomplete_completionListElement
  58. {
  59.     margin:0px!important;
  60.     background-color:#ffffff;
  61.     color:windowtext;
  62.     border:buttonshadow;
  63.     border-width:1px;
  64.     border-style:solid;
  65.     cursor:'default';
  66.     overflow:auto;
  67.     height:200px;
  68.     font-family:Tahoma;
  69.     font-size:small;
  70.     text-align:left;
  71.     list-style-type:none;
  72.     padding: 5px 5px 5px 5px;
  73.     }
  74.  
  75. /* AutoComplete highlighted item */
  76. .autocomplete_highlightedListItem
  77. {
  78.     background-color:#ffff99 ;
  79.     color:black;
  80.     padding:0px;
  81.     }
  82.  
  83.     /* AutoComplete item */
  84. .autocomplete_listItem
  85. {
  86.     background-color:window;
  87.     color:windowtext;
  88.     padding:0px;
  89.    }
  90.        
  91. return
  92. {
  93.     label: item.Name.toString()
  94.     value: item.Name.toString()
  95. }
  96.        
  97. return {
  98.     label: item.Name.toString()
  99.     value: item.Name.toString()
  100. }
  101.        
  102. <asp:ScriptManager ID="ScriptManager1" runat="server">
  103.     <Services>
  104.         <asp:ServiceReference Path="/PathToServiceHere/AutoComplete.svc" />            
  105.     </Services>
  106. </asp:ScriptManager>
  107.        
  108. <input id="ModelBox" type="text" style="width: 158px;" />
  109.        
  110. $(function () {
  111.             $("#ModelBox").autocomplete({
  112.                 minLength: 0,
  113.                 delay: 0,
  114.                 cache: true,
  115.                 source: function (req, addToList) {
  116.  
  117.                     var popList = new GetAutoCompleteService.GetAutoComplete();
  118.                     popList.GetModels(req.term, function (model) {
  119.  
  120.                         var listItems = [];
  121.                         if (model.length > 0) {
  122.                             for (var key = 0; key < model.length; key++) {
  123.                                 listItems.push(model[key].Model);
  124.                             }
  125.                         } else {
  126.                             listItems.push("No Matching Model.");
  127.                         }
  128.                         addToList(listItems);
  129.                     }, function onError() {
  130.                     });
  131.                 }
  132.             });
  133.  
  134.             $("#ModelBox").click(function () {
  135.                 // close if already visible
  136.                 if ($("#ModelBox").autocomplete("widget").is(":visible")) {
  137.                     $("#ModelBox").autocomplete("close");
  138.                     return;
  139.                 }
  140.  
  141.                 // work around a bug (likely same cause as #5265)
  142.                 $(this).blur();
  143.  
  144.                 // pass empty string as value to search for, displaying all results
  145.                 $("#ModelBox").autocomplete("search", "");
  146.                 $("#ModelBox").focus();
  147.             });
  148.         });
  149.        
  150. namespace autocomplete.Service
  151.     {
  152.         using System.Collections.Generic;
  153.         using System.Linq;
  154.  
  155.         using System.ServiceModel;
  156.         using System.ServiceModel.Activation;
  157.  
  158.         using System.Data;
  159.  
  160.         [ServiceContract(Namespace = "GetAutoCompleteService")]
  161.         [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  162.         public class GetAutoComplete
  163.         {
  164.  
  165.             [OperationContract]
  166.             public List<Models> GetModels(string model)
  167.             {
  168.  
  169.                // Data access here to retrieve data for autocomplete box then convert to list
  170.  
  171.     // or however you get the data into list format
  172.                 List<Models> List = dataJustPulled.ToList();
  173.                 return List;
  174.             }
  175.         }
  176.     }
  177.        
  178. return{
  179.        label: item.Name.toString(),
  180.        value: item.Name.toString()
  181. }