2011-09-22 7 views
1

내가 가지고있는 것은 열에서 jQueryUI 자동 완성을 사용하는 jqgrid입니다. "fsdfsdfsfasf"를 작성하고 Enter 키를 눌러 내 프로그램이 물론 괴물이되어 그런 항목이 존재하지 않는다고 말하면 모든 것은 1 작은 것을 제외하고는 완벽하게 작동합니다.jQuery UI 자동 완성 유효성 검사를 사용하는 JQgrid

내가 원하는 것은 일종의 유효성 검사를하는 것입니다. 따라서 사용자가 자동 ​​완성 목록 프로그램에없는 데이터를 입력하면 자동 완성 텍스트를 ""으로 자동 입력해야합니다 (예 : 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); 
      }; 
     } 
    } 
}, 

답변

2

당신은 자동 완성의 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/

+0

예를 들어 위의 두 가지 문제가 생길 수 있습니다. 키 전체 목록이 표시되지 않으면 anylonger가 표시되지 않고 JS 오류가 계속 발생합니다. 브랜드 목록 – Timsen

+0

@ 킴슨 : 방금 선을 그었다는 것을 알아 차 렸습니다. 이자형. 제 편집문을 확인하고 JS 오류가 수정되었는지 알려주십시오. –

+0

잘못된 데이터를 입력하면 JS 오류가 jquery 1.6.2 min.js 파일에 계속 나타나지만 데이터가 아래로 누름 키 위에 표시됩니다 – Timsen