JQgrid jQuery UI自動完成驗證

我所擁有的是jqgrid，它在列中使用jQueryUI自動完成。除了1個小東西外，一切都很完美，如果用戶選擇編寫「fsdfsdfsfasf」並按下回車鍵，我的程序當然會嚇壞了，並告訴我這樣的項目不存在。JQgrid jQuery UI自動完成驗證

我想是做出某種驗證，因此，如果用戶輸入不自動填充中的列表程序中存在應該自動把自動填充文本是""就像這裏的一些數據：http://view.jquery.com/trunk/plugins/autocomplete/demo/在「月」字段。

由於我使用jQueryUI自動完成，而不是jQuery自動完成我不能使用mustmatch選項。

{ 
    name: 'Brand', 
    index: 'Brand', 
    align: 'left', 
    width: 50, 
    sortable: true, 
    editable: true, 
    edittype: 'text', 
    editoptions: { 
     dataInit: 
     function (elem) { 
      $(elem).autocomplete({ 
       delay: 0, 
       minLength: 0, 
       source: '@Url.Action("GetBrands")', 
       minChars: 0, 
       max: 12, 
       autoFill: true, 
       mustMatch: true, 
       matchContains: false, 
       scrollHeight: 220, 
       formatItem: function(data, i, total) { 
        return data[0]; 
       }, 
       select: function (event, ui) { 
        if (ui.item.value == "Opret ny Brand...") { 
         $(function() { 
          var dialogDiv = $('#dialog'); 
          var viewUrl = '@Url.Action("CreateBrand")'; 

          $.get(viewUrl, function (data) { 
           dialogDiv.html(data); 

           var $form = $("#updateCarForm"); 
           $form.unbind(); 
           $form.data("validator", null); 

           //Check document for changes 
           $.validator.unobtrusive.parse(document); 

           //Re add validation with changes 
           $form.validate($form.data("unobtrusiveValidation").options); 

           //open dialog 
           dialogDiv.dialog('open'); 
          }); 

         }); 
        } 
       } 

      }) 
      .data("autocomplete")._renderItem = function (ul, item) { 
       return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a><span style='display:inline-block;width:60px;'><b>" + 
         item.value + "</b></span></a>") 
        .appendTo(ul); 
      }; 
     } 
    } 
},

來源

2011-09-22 Timsen

可以通過提供一個函數作爲參數傳遞給自動完成的source參數和做Ajax請求自己實現這個功能。喜歡的東西：

$("#auto").autocomplete({ 
    source: function(request, response) { 
     // Manually perform the AJAX request: 
     var element = this.element; 
     $.get('@Url.Action("GetBrands")', request, function (results) { 
      // No results? Clear out the input field. 
      if (!results.length) { 
       element.val(''); 
      } 
      // Notify the widget of the results. 
      response(results); 
     }); 
    } 
});

（未經測試，您可能需要調整AJAX調用。）

如果必要的話，我可以提供遠程例子，但概念是使用本地數據的例子相同來源：http://jsfiddle.net/andrewwhitaker/Dgfgr/

來源

2011-09-22 12:59:35

這將是一個很好的例子，因爲現在我有2個問題，當我按下鍵完整列表沒有顯示anylonger，並且我不斷收到一個JS錯誤，每次我打電話一個項目，不exists在我品牌列表 – Timsen

@Timsen：剛注意到我有一條線路即你能檢查出我的編輯，並讓我知道如果修復了任何JS錯誤？ –

JS錯誤仍然出現在jquery 1.6.2 min.js文件中，如果我輸入無效數據，但現在數據顯示按下鍵 – Timsen

JQgrid jQuery UI自動完成驗證

回答

相關問題