2013-05-29 58 views
0

我們如何使用infinit滾動來實現自動完成組合? 我發現一個自動完成jQuery UI用infinit滾動,但是這個自動完成通過pagemethods獲取數據。但我想在mvc應用程序中使用它,並希望使用控制器的操作來檢索數據。 使用這個自動完成由pagemethods應該這樣做:jquery smartAutocomplete with infinite scroll

$(document).ready(function() { 
     //Input for testing purposes 
     $("#inp").smartautocomplete({ 
      getDataFunc: getData, 
      pageSize: 15, 
      autoFocus: true 
     }); 
    }); 

    //Function the SA plugin called when data is needed. 
    var getData = function (input, pageIndex, pageSize, callback) { 

     PageMethods.GetData(input, pageIndex, pageSize, function (response) { 
      if (response) { 
       response = $.map(response, function (item) { 
        return { 
         label: item, 
         value: item 
        } 
       }); 
       callback(response); 
      } 
      else callback(); 
     }); 
    }; 

,但我改變使用$就獲取數據的方式:

var getData = function (input, pageIndex, pageSize, callback) { 
     $.getJSON(
      { url: '@Url.Action("GetData", "Home")' }, 
      { input: input, pageIndex: pageIndex, pageSize: pageSize }, 
      function (response) { 
      if (response) { 
       response = $.map(response, function (item) { 
        return { 
         label: item, 
         value: item 
        }; 
       }); 
       callback(response); 
      } 
      else callback(); 
     }); 

    }; 

,但它不工作,而動作不調用。 這個自動完成是在這裏訪問: http://www.codeproject.com/Articles/325719/JQueryUI-smartAutocomplete?fid=1683905

我想知道是否有任何其他的解決方案,具有無窮遠滾動自動完成

回答

1

更換PageMethod的通話用AJAX調用

 $.ajax({ 
      url: '@Url.Action("GetData", "Default")',     
      type: 'GET', 
      dataType: 'json', 
      data: { 
       input: input, 
       pageIndex: pageIndex, 
       pageSize: pageSize 

      }, 

      success: function (response) { 
       //alert(response); 
       if (response) { 
        response = $.map(response, function (item) { 
         return { label: item, value: item }; 
        }); 
        callback(response); 
       } else { 
        callback(); 
       } 
      }, 
      error: function (e) { 
       alert('error' + e); 
      }, 
      contentType: 'application/json; charset=utf-8' 


     }); 

確保您的控制器行動正在返回JSONResult

return new JsonResult {JsonRequestBehavior = JsonRequestBehavior.AllowGet, Data = data };//new {result = data} 

希望這會有所幫助。