c# - How can i get remote call on bootstrap twitter typeahead to work, by calling asp.net web method -


i trying load typeahead.js using bloohound's remote function can call web method. have seen similar threads querystring being used :

  1. integrating typeahead.js asp.net webmethod
  2. typeahead.js , bloodhound.js integration c# webforms webmethod
  3. http://yassershaikh.com/using-twitter-typeahead-js-with-asp-net-mvc-web-api/

and many more....

however, cannot find example ajax used call webmethod typeahead.js.

so have , works:

webmethod

    [webmethod]     public static string getemployeetypeahead()     {         javascriptserializer jss = new javascriptserializer();         jss.maxjsonlength = 100000000;         string json;          using (var rep = new rbzpos_csharpentities())         {             var result = rep.employees                             .where(x => x.employeestate == 1)                             .select(x => new {                                  x.employeeid,                                 x.fullname,                                 x.manno,                                 x.nrc                             }).tolist();              json = jss.serialize(result);         }          return json;     } 

the client

        function loademployeejson() {         $.ajax({             type: "post",             url: "/webmethods/test.aspx/getemployeetypeahead",             data: "{}",             contenttype: "application/json",             datatype: "json",             success: function (msg) {                 emplist = $.parsejson(msg.d);                  //otherwise not work                  loademployeetypeahead();             },             error: function (msg) {                 alert("error:" + json.stringify(msg));             }         });      }     function loademployeetypeahead() {         var empdata = emplist;          var fullname = new bloodhound({             datumtokenizer: function (d) {                 return bloodhound.tokenizers.whitespace(d.fullname)             },             querytokenizer: bloodhound.tokenizers.whitespace,             local: empdata,             limit: 10         });          fullname.initialize();         // make code less verbose creating variables following         var fullnametypeahead = $('#<%=txtfullname.clientid %>.typeahead');          // initialise typeahead employee name         fullnametypeahead.typeahead({             highlight: true         }, {             name: 'fullname',             displaykey: 'fullname',             source: fullname.ttadapter(),             templates: {                 empty: [                                     '<div class="empty-message">',                                     'no match',                                     '</div>'                 ].join('\n'),                 suggestion: function (data) {                     return '<h6 class="">' + data.fullname + "<span class='pull-right text-muted small'><em>" + data.nrc + "</em></span>" + '</h6>';                 }             }         });          var fullnameselectedhandler = function (eventobject, suggestionobject, suggestiondataset) {             /* see comment in previous method */             $('#<%=txtfullname.clientid %>').val(suggestionobject.fullname);             $('#<%=txtemployeeid.clientid %>').val(suggestionobject.employeeid);             $('#<%=txtmanno.clientid %>').val(suggestionobject.manno);             $('#<%=txtnrc.clientid %>').val(suggestionobject.nrc);          };          // associate typeahead:selected event bespoke handler         fullnametypeahead.on('typeahead:selected', fullnameselectedhandler);     }      function clearandreinitilize() {          $('.typeahead').typeahead('destroy');         $('.typeahead').val('');     } 

so can see making local call instead of remote.

how can remote function call webthod , fill typeahead without using querystrings

okay got work via ashx generic handler. instead of using web method used following ashx handler:

 public class employess : ihttphandler {      public void processrequest(httpcontext context)     {         javascriptserializer jss = new javascriptserializer();         jss.maxjsonlength = int32.maxvalue;         string json;         string prefixtext = context.request.querystring["query"];          using (var rep = new rbzpos_csharpentities())         {             var result = rep.employees                              .where(x => x.employeestate == 1 && x.fullname.contains(prefixtext.toupper()))                              .select(x => new                              {                                  x.employeeid,                                  x.fullname,                                  x.manno,                                  x.nrc                              }).toarray();              json = jss.serialize(result);         }          context.response.contenttype = "text/javascript";         context.response.write(json);     }      public bool isreusable     {                 {             return false;         }     } } 

below jquery , ajax call ashx handler

 $(document).ready(function () {         $(document).ajaxstart($.blockui).ajaxstop($.unblockui);         loademployeetypeahead();       //  loademployeejson();     });  function loademployeetypeahead() {         //var empdata = emplist;          var fullname = new bloodhound({             remote: {                 url: '/employess.ashx?query=%query',                 wildcard: '%query'             },             datumtokenizer: function (d) {                 //var employees = $.parsejson(msg.d);                 return bloodhound.tokenizers.whitespace(d.fullname)             },             querytokenizer: bloodhound.tokenizers.whitespace,             limit: 10         });          fullname.initialize();         // make code less verbose creating variables following         var fullnametypeahead = $('#<%=txtfullname.clientid %>.typeahead');          // initialise typeahead employee name         fullnametypeahead.typeahead({             highlight: true         }, {             name: 'fullname',             displaykey: 'fullname',             source: fullname.ttadapter(),             templates: {                 empty: [                                     '<div class="empty-message">',                                     'no match',                                     '</div>'                 ].join('\n'),                 suggestion: function (data) {                     return '<h6 class="">' + data.fullname + "<span class='pull-right text-muted small'><em>" + data.manno + "</em></span><span class='pull-right text-muted small'><em>" + data.nrc + "</em></span>" + '</h6>';                 }             }         });          var fullnameselectedhandler = function (eventobject, suggestionobject, suggestiondataset) {             /* see comment in previous method */             $('#<%=txtfullname.clientid %>').val(suggestionobject.fullname);             $('#<%=txtemployeeid.clientid %>').val(suggestionobject.employeeid);             $('#<%=txtmanno.clientid %>').val(suggestionobject.manno);             $('#<%=txtnrc.clientid %>').val(suggestionobject.nrc);          };          // associate typeahead:selected event bespoke handler         fullnametypeahead.on('typeahead:selected', fullnameselectedhandler);     } 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -