2010-09-14 61 views
0

我已經竊取/發現/使用/編寫和編輯jQuery的以下小部件的自動完成下拉列表。

(function($) { 
    $.widget("ui.comboboxGemeenten", { 
     _create: function() { 
      var focushelper = false; 
      var lastTerm; 
      var self = this; 
      var select = this.element.hide(); 
      var input = $("<input>") 
        .insertAfter(select) 
        .width(300) 
        .autocomplete({ 
         source: function(request, response) { 

          var jsonbox = { gem_query: request.term }; 
          lastTerm = request.term; 

          $.post("/" + $.trim(window.location.pathname.substr(1, 9)) + "/Gemeenten/FilterInstGem/", jsonbox, function donedit(data) { 
           //alert("iets"); 
           if (data.succes == true && data.lastTerm == lastTerm) { 
           //alert(textlength); 
            //alert(data.lesplaatsen); 
            response($.map(data.gemeenten, function(item) { 

             return { 
              id: item, 
              // label: (item.Lpl_Gemeente == null ? "" : item.Lpl_Gemeente) + " - " + item.Lpl_Instelling, 
              value: item 
             } 
            })); 
           } else { 
            // alert("slecht"); 
           } 
          }, "json"); 
         }, 
         delay: 0, 
         change: function(event, ui) { 
          if (!ui.item) { 
           // remove invalid value, as it didn't match anything 
           $(this).val(""); 
           return false; 
          } 
          //alert(ui.item.id); 
          select.val(ui.item.id); 
          self._trigger("selected", event, { 
           item: select.find("[value='" + ui.item.id + "']") 
          }); 
         }, 
         focus: function() { 
          focushelper = true; 
         }, 
         minLength: 2 
        }) 
        .addClass("ui-widget ui-widget-content ui-corner-left") 
        .focus(function() {    //if it is default value, remove it. 
         if (select.val() == "" && !focushelper) { 
          //alert(select.val()); 
          $(input).val(""); 
         } 
        }) 
        .val(select.find("option:selected").text()); //return selected value for editing 

     } 
    }); 

})(jQuery); 

問題是,我回項目的長列表,當我寫輸入字段篩選裏面,像

「根」,它會做一個帖子爲「G」爲「GE 「和」創「,因爲它發佈每一個變化。 問題是列表的最後一次返回並不總是用於「gen」,但有時候用於「ge」,所以我的結果不正確。

使用delay沒有改變任何東西。

使用minlength無所謂,一旦它超過minlength問題再次出現。

那麼我做了什麼?我用var lastTerm來檢查收到我的清單,如果這個結果是最後一個期限的,而不是中間的。

這確實解決了我的問題,但它不是最好的。

是否有辦法停止發佈帖子,所以我不浪費一大堆服務器資源,因爲不是最後一期的結果,無論如何都會被丟棄。

的MVC部分:

[HttpPost] 
    public ActionResult FilterInstGem(string gem_query) { 
     List<string> lpls = _db.InstellingAdressens.Where(l => l.GEMEENTE.Contains(gem_query)).Select(q => q.GEMEENTE).Distinct().OrderBy(q => q).ToList(); 
     return Json(new { succes = true, lastTerm = gem_query, gemeenten = lpls }); 
    } 

總事情是這樣的:http://jqueryui.com/demos/autocomplete/#combobox

回答

1

由於$.post()回報的XmlHttpRequest可以保存對它的引用並中止,就像這樣:

if(this.xhr) this.xhr.abort(); 
this.xhr = $.post("/" + $.trim(window.location.pathname.substr(1, 9)) + "/Gemeenten/FilterInstGem/", jsonbox, function donedit(data) { 
    this.xhr = null; 
    //rest of your current post success code.... 
}); 

通過將這些放在您目前只有的地方

$.post("/" + $.trim(window.location.pathname.substr(1, 9)) + "/Gemeenten/FilterInstGem/", jsonbox, function donedit(data) { 

要存儲的參考請求......如果收到請求時成功(前另一個人的解僱),它會放棄最後一個請求,如果它不中斷並完成,它會執行success你已經擁有的回叫,設置this.xhr = null;,所以我們知道下次沒有什麼可以放棄的。

+0

一如既往的完美解決方案。很好地解釋。謝謝! – Stefanvds 2010-09-14 10:25:16